如何实现可点击的垂直手风琴式导航组件

本文介绍如何将基于 CSS :hover 的垂直布局改造为支持点击切换的 JavaScript 驱动手风琴组件，通过添加/移除 .selected 类控制展开状态，并提供简洁、现代、兼容性良好的实现方案。

本文介绍如何将基于 css `:hover` 的垂直布局改造为支持点击切换的 javascript 驱动手风琴组件，通过添加/移除 `.selected` 类控制展开状态，并提供简洁、现代、兼容性良好的实现方案。

在响应式网页设计与作品集展示场景中，垂直手风琴（Vertical Accordion）是一种高效利用空间、提升信息层级体验的交互模式。你当前使用纯 CSS :hover 实现了悬停展开效果，但用户期望更可靠、可预测的点击交互——尤其在触摸设备或无障碍访问场景下，click 比 hover 更具语义性与兼容性。

下面我们将以渐进增强方式，用轻量级原生 JavaScript 替换 :hover 逻辑，实现单击展开、其他项自动收起的“独占展开”行为，并同步优化 CSS 以符合现代标准。

✅ 核心实现思路

• CSS 层：将原 li:hover 规则替换为 li.selected，定义展开时的 flex 值（如 30vw）；
• JS 层：为每个
• 绑定 click 事件，点击时先清除所有 .selected 类，再为目标项添加该类；
• 去冗余：移除已过时的 -webkit-、-moz-、-ms- 等厂商前缀（现代浏览器均已原生支持 flex 和 transition）；
• 结构健壮性：确保 HTML 中嵌套标签闭合正确（原示例存在多处未闭合的
  和 ，已修正）。

  ? 完整代码示例

  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（现代化、精简、高可维护）：

  

  Musico

  Musico 是一个AI驱动的软件引擎，可以生成音乐。 它可以对手势、动作、代码或其他声音做出反应。

  下载

  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 文件，即可立即运行一个专业级点击式垂直手风琴。