，已修正）。? 完整代码示例
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>Project 2</li>
<li>Project 3</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: 100%;
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（无依赖、ES6+、防重复绑定）：
document.addEventListener('DOMContentLoaded', () => {
const listItems = document.querySelectorAll('#accordion li');
const unselectAll = () => {
listItems.forEach(item => item.classList.remove('selected'));
};
listItems.forEach((item, index) => {
item.addEventListener('click', () => {
unselectAll();
item.classList.add('selected');
});
});
});⚠️ 注意事项与最佳实践
-
可访问性（a11y）增强建议：为
- 添加 role="tab"，对应内容区添加 role="tabpanel"，并用 aria-expanded 和 aria-controls 关联状态，便于屏幕阅读器识别；
-
移动端适配：若需支持 iOS Safari 点击穿透或延迟问题，可在
- 上添加 cursor: pointer 并确保其有明确的 tabindex="0"（尤其当内容不可聚焦时）；
-
性能考量：本方案使用事件委托的简化版（直接绑定），适用于固定数量项；若列表动态增删，推荐改用事件委托至
-
无限自动滚动？：题中提及的“infinite auto scroll”属于独立动效需求，不属手风琴核心逻辑。如需实现，建议用 scrollIntoView({ behavior: 'smooth' }) 或 CSS @keyframes + animation 配合 JS 控制，但需注意与手风琴交互的冲突，建议作为可选增强模块单独封装。
✅ 总结
通过将 :hover 切换为 .selected 类 + 简洁的 DOM 事件控制，你获得了一个语义清晰、跨设备可用、易于维护的垂直手风琴组件。它不仅满足课程项目对交互可靠性的要求，也为后续扩展（如动画回调、加载状态、服务端集成）提供了良好基础。记住：好的交互组件 = 清晰的状态管理 + 最小化副作用 + 显式可测试行为。
现在，只需将上述三段代码分别放入 .html、.css、.js 文件，即可立即运行一个专业级点击式垂直手风琴。
