h5实现展开列表

使用HTML5和CSS实现展开列表

在HTML5中，可以通过结合CSS和JavaScript实现展开列表效果。以下是几种常见的方法：

方法1：使用details和summary标签

HTML5提供了<details>和<summary>标签，无需JavaScript即可实现展开/折叠效果：

<details>
  <summary>点击展开列表</summary>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</details>

方法2：使用CSS和JavaScript

通过CSS控制显示隐藏，JavaScript处理点击事件：

<div class="expandable-list">
  <button class="toggle-btn">展开列表</button>
  <ul class="list-content">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

<style>
.list-content {
  display: none;
}
.list-content.show {
  display: block;
}
</style>

<script>
document.querySelector('.toggle-btn').addEventListener('click', function() {
  document.querySelector('.list-content').classList.toggle('show');
});
</script>

使用jQuery实现展开列表

如果项目中使用了jQuery，可以简化实现：

<div class="expandable-list">
  <button class="toggle-btn">展开列表</button>
  <ul class="list-content">
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('.toggle-btn').click(function() {
  $('.list-content').toggle();
});
</script>

使用CSS过渡动画增强效果

为展开/折叠添加平滑的动画效果：

.list-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.list-content.show {
  max-height: 500px; /* 根据实际内容调整 */
}

实现多级展开列表

对于多级嵌套列表，可以递归实现展开效果：

<ul class="nested-list">
  <li>
    <span class="toggle">一级列表</span>
    <ul>
      <li>
        <span class="toggle">二级列表</span>
        <ul>
          <li>三级列表项1</li>
          <li>三级列表项2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

<script>
document.querySelectorAll('.toggle').forEach(toggle => {
  toggle.addEventListener('click', function() {
    this.parentElement.querySelector('ul').classList.toggle('show');
  });
});
</script>

响应式设计考虑

确保展开列表在不同设备上都能良好显示：

@media (max-width: 768px) {
  .list-content {
    font-size: 14px;
  }
  .toggle-btn {
    width: 100%;
  }
}

这些方法可以根据项目需求选择使用，纯HTML5方案最简单，而JavaScript方案提供了更多自定义可能性。动画效果可以提升用户体验，响应式设计确保在各种设备上都能正常使用。