本文详解如何将纯 css 悬停式垂直布局升级为 javascript 驱动的可点击手风琴组件，支持单击展开、自动收起其他项，并提供现代、简洁、可维护的代码实现。
本文详解如何将纯 css 悬停式垂直布局升级为 javascript 驱动的可点击手风琴组件，支持单击展开、自动收起其他项，并提供现代、简洁、可维护的代码实现。
在响应式网页设计中，垂直手风琴（Vertical Accordion）是一种高效利用空间、提升信息层级体验的交互模式。你当前使用 :hover 实现的弹性伸缩效果虽直观，但缺乏用户主动控制能力，且不兼容触屏设备。本文将带你用轻量级原生 JavaScript 将其改造为真正可点击、可聚焦、可访问（a11y-ready）的垂直手风琴组件，同时移除过时的浏览器前缀，确保代码简洁、性能优良、语义清晰。
✅ 核心实现思路
- 状态驱动替代悬停：将原本依赖 li:hover 的视觉反馈，改为通过添加/移除 .selected 类来控制展开状态；
- 单选互斥逻辑：每次点击一个
- 时，先清除所有 .selected 状态，再仅激活当前项；
- CSS 过渡平滑衔接：复用原有 flex 属性过渡动画，无需修改样式逻辑，仅变更触发条件；
- 现代 CSS 兼容性优化：移除 -webkit-、-moz-、-ms- 等已广泛支持的旧前缀，精简 CSS 体积。
? 完整代码实现
HTML（语义化结构，精简冗余标签）
<ul id="accordion"> <li> <div class="projects"> <a href="matilde/matilde.html"> <div class="maintitle">Networked Infrastructures</div> <div class="subtitle">Three geographies (environmental, economic, political)</div> <img src="gif5.gif" alt="Project preview"> </a> </div> <!-- 可继续添加多个 .projects --> </li> <li> <div class="projects"> <a href="matilde/matilde.html"> <div class="maintitle">Urban Data Flows</div> <div class="subtitle">Real-time sensing and civic feedback loops</div> <img src="gif6.gif" alt="Project preview"> </a> </div> </li> <!-- 更多 li... --> </ul>CSS（专注行为与表现分离）
body { width: 100vw; height: 100vh; margin: 0; } ul, li { margin: 0; padding: 0; list-style: none; } ul { display: flex; overflow: hidden; height: 100vh; width: 100vw; } li { overflow-y: auto; flex: 1; width: 8.3vw; height: calc(100% - 1%); transition: flex 500ms ease-out; padding: 20px; box-shadow: 2px 0px 4px -1px rgba(0, 0, 0, 0.66); } li.selected { flex: 30vw; } .projects { width: 30vw; height: auto; margin-bottom: 5vh; } /* 文字与媒体样式保持不变 */ a { text-decoration: none; color: black; } a:hover { opacity: 0.5; } .maintitle { font-size: 30px; text-transform: uppercase; font-family: Arial, sans-serif; } .subtitle { font-size: 20px; font-family: Arial, sans-serif; } img { padding-top: 20px; width: 25vh; height: auto; }JavaScript（轻量、无依赖、高可读）
document.addEventListener('DOMContentLoaded', () => { const items = document.querySelectorAll('#accordion li'); const unselectAll = () => { items.foreach(item => item.classList.remove('selected')); }; items.forEach((item, index) => { item.addEventListener('click', () => { unselectAll(); item.classList.add('selected'); }); // 【增强可访问性】支持键盘操作（Enter/Space） item.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); unselectAll(); item.classList.add('selected'); } }); // 【可选】点击空白区域收起（提升用户体验） item.addEventListener('blur', () => { // 若需失焦自动收起，可在此扩展逻辑 }); }); });⚠️ 注意事项与最佳实践
- 无障碍支持（a11y）：已添加 keydown 监听器支持键盘操作（Enter/Space），建议为每个
- 添加 tabindex=”0″ 以确保可聚焦：
<li tabindex="0">...</li> - 移动端适配：click 事件在移动端存在约 300ms 延迟，如需极致响应，可引入 fastclick 库或改用 pointerdown（注意兼容性权衡）；
- 性能考量：querySelectorAll + forEach 在项目数 ≤ 50 时性能无忧；若列表极长（如动态加载百项），建议采用事件委托（ul 上监听，再判断 e.target.closest(‘li’)）；
- 无限滚动？ 当前需求中的“无限自动滚动”属于独立功能（如轮播或懒加载），不属于手风琴交互范畴；如需集成，推荐使用 Intersection Observer API 或第三方库（e.g., Swiper）单独实现，避免耦合逻辑。
✅ 总结
本方案以最小改动完成从 :hover 到 click 的升级：仅替换 CSS 选择器、注入 15 行健壮 js，并强化了可访问性与现代兼容性。它不依赖任何框架，易于嵌入现有项目，也便于后续扩展（如添加动画回调、持久化展开状态、支持多选等）。对于学术作品集、课程网站等注重表达力与交互质感的场景，这是一个专业、可靠且可持续演进的基础组件。
如需进一步支持「点击收起」、「双击切换」或「动画结束后回调」等功能，可在 classList.add/remove 后监听 transitionend 事件进行精细化控制。