当前位置：首页 > 文章列表 > 文章 > 前端 > 垂直手风琴导航点击展开实现方法

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

2026-03-04 23:39:55 0浏览收藏

✅ 核心实现思路

状态驱动替代悬停：将原本依赖 li:hover 的视觉反馈，改为通过添加/移除 .selected 类来控制展开状态；
单选互斥逻辑：每次点击一个
时，先清除所有 .selected 状态，再仅激活当前项；
CSS 过渡平滑衔接：复用原有 flex 属性过渡动画，无需修改样式逻辑，仅变更触发条件；
现代 CSS 兼容性优化：移除 -webkit-、-moz-、-ms- 等已广泛支持的旧前缀，精简 CSS 体积。

? 完整代码实现

HTML（语义化结构，精简冗余标签）


  
    
      
        Networked Infrastructures
        Three geographies (environmental, economic, political)
        
      
    
    
  
  
    
      
        Urban Data Flows
        Real-time sensing and civic feedback loops

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" 以确保可聚焦：
```
...
```
移动端适配：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学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！