本文详解如何将纯 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 事件进行精细化控制。
