如何实现UL LI列表的展开与收起功能？

Question

如何使用HTML、CSS和JavaScript实现无序列表（UL LI）的展开与收起交互效果？

Answer 1

1. 基本结构：HTML部分

要实现无序列表（UL LI）的展开与收起效果，首先需要一个清晰的HTML结构。每个父级LI元素中包含子级UL，形成嵌套结构。

<ul id="accordion">
  <li>
    <span>菜单项 1</span>
    <ul>
      <li>子项 1-1</li>
      <li>子项 1-2</li>
    </ul>
  </li>
  <li>
    <span>菜单项 2</span>
    <ul>
      <li>子项 2-1</li>
      <li>子项 2-2</li>
    </ul>
  </li>
</ul>

2. 样式控制：CSS部分

CSS用于隐藏默认的子列表，并在点击时通过JavaScript切换显示状态。

#accordion ul {
  display: none;
}
#accordion li span {
  cursor: pointer;
  padding: 10px;
  background-color: #f0f0f0;
  display: block;
}

3. 交互逻辑：JavaScript部分

使用JavaScript为每个带有子列表的标签添加点击事件监听器，动态切换子列表的显示状态。

document.querySelectorAll('#accordion > li').forEach(item => {
  const trigger = item.querySelector('span');
  const sublist = item.querySelector('ul');

  trigger.addEventListener('click', () => {
    sublist.style.display = sublist.style.display === 'block' ? 'none' : 'block';
  });
});

4. 扩展功能：动画过渡效果

为了提升用户体验，可以为展开/收起操作添加CSS过渡动画。

#accordion ul {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  max-height: 0;
}
#accordion ul.active {
  max-height: 500px;
}

对应的JavaScript修改如下：

trigger.addEventListener('click', () => {
  sublist.classList.toggle('active');
});

5. 状态管理与可访问性优化

为增强可访问性，建议添加ARIA属性，并在点击时更新图标或文本状态。

元素	说明
aria-expanded	表示当前节点是否展开
role="treeitem"	定义为可交互的树形结构项

trigger.setAttribute('aria-expanded', false);
trigger.addEventListener('click', () => {
  const expanded = trigger.getAttribute('aria-expanded') === 'true';
  trigger.setAttribute('aria-expanded', !expanded);
});

6. 可视化流程图：展开与收起交互流程

以下是一个简单的mermaid流程图，描述用户点击触发器后所发生的逻辑流程。

graph TD
      A[用户点击标题] --> B{判断当前状态}
      B -->|展开| C[关闭内容]
      B -->|关闭| D[打开内容]
      C --> E[更新UI和ARIA状态]
      D --> E

7. 性能优化与模块化设计

对于大型项目，建议将该组件封装为可复用模块，支持配置参数如动画时间、初始状态等。

• 使用ES6类封装展开/收起逻辑
• 支持多个层级嵌套
• 提供API方法：openAll(), closeAll()
• 结合前端框架（React / Vue）实现更复杂的交互