垂直手风琴导航点击展开实现方法

本文手把手教你将传统CSS悬停式垂直导航栏升级为现代、可点击、高可访问性的JavaScript手风琴组件——无需框架，仅15行精炼原生代码，即可实现单击展开、自动收起其他项、键盘操作支持（Enter/Space）、响应式触屏友好及无障碍兼容，同时剔除冗余前缀、保持CSS动画平滑、语义化HTML结构清晰，是学术作品集、课程网站等追求专业交互体验项目的理想解决方案。

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

今天关于《垂直手风琴导航点击展开实现方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！