这是一款基于CSS Flexbox 与 jQuery技术实现的点击展开的图片手风琴卡片。五张风景图片排成一组圆角卡片，当前项占据较大宽度，其余图片收成窄条。点击另一张时，宽度在卡片之间平滑分配，底部图标移动到对应位置，标题与说明随后出现。脚本只负责切换 active 类，展开、缩放和文案动画交给 CSS，适合图片分类入口和专题展示。

图片手风琴展开时哪些元素一起变化

展开依靠弹性布局。当前卡片获得更大的 flex 比例，邻近卡片自然收窄，无须为每次点击计算宽度。
图片与文字一起过渡。背景位置、阴影和文字位移配合变化，切换过程中仍能认出卡片内容。
窄屏逐步减少可见项。现有断点会隐藏后面的部分卡片，优先保证前几项的展示宽度。

Flex卡片如何只用状态类完成切换

交互逻辑集中在一小段点击处理里，先清除同组 active，再为当前项添加状态。CSS 分别定义普通与选中卡片的弹性比例、最小宽度及背景尺寸，因而脚本不必逐帧控制。它更接近分类入口或横向手风琴，并不是带自动播放和拖动吸附的轮播。

$(this).addClass("active");

风景展开卡片的图片和宽度在哪里更换

卡片标题、说明和图标在 index.html，照片路径通过卡片上的背景变量设置，图片放在 img 目录。展开比例、最小宽度、文字过渡与隐藏断点位于 style.css；点击逻辑在 script.js。若增加到更多图片，需要同时考虑总宽度和手机端被隐藏项目的访问方式。

横向手风琴的手机展示与跳转问题

为什么手机上只显示部分照片？

这是现有响应式规则的处理方式，会在更窄屏幕隐藏靠后的项目。若所有项目都必须可访问，建议改成横向滚动或增加切换入口。

能自动播放或左右拖动吗？

当前只有点击切换选中项，没有定时播放或手势轮播。可以沿用 active 状态扩展，但需要另行处理播放暂停和触屏操作。

点击后会打开详情页吗？

现有卡片用于展开演示，没有配置实际详情地址。接入项目时可增加链接，并区分展开操作与跳转操作。

适合风景相册、作品分类和活动入口。完整卡片样式与状态切换代码可下载查看。