如何用JavaScript实现图片折叠切换及状态跟踪功能？

在现代网页设计中。常常需要让图片根据使用者操作进行折叠或展开，以提高页面的交互性和美观度。只是很多开发者在实现过程中会遇到以下痛点：

• 图片状态难以追踪，导致按钮文字与实际显示不匹配。
• 代码结构混乱，后期维护成本高。
• 缺乏跨浏览器兼容性与无障碍支持。

一步步实现图片折叠切换与状态跟踪

1️⃣ 创建基础结构

Hide

2️⃣ 编写样式

3️⃣ JavaScript：状态管理与切换逻辑

我们通过一个布尔变量来追踪图片是否可见，并在按钮点击时更新显示状态与按钮文字。