正文

轻松上手Bootstrap列表组折叠技巧，快速打造响应式可折叠菜单

/0 浏览量
0423

Bootstrap 是一个流行的前端框架，它提供了许多实用的组件来帮助开发者快速构建响应式网站。其中，列表组折叠组件是一个非常有用的功能，可以让你轻松创建可折叠的菜单、面板或其他内容。在本篇文章中，我将带你一起学习如何使用 Bootstrap 列表组折叠技巧，快速打造一个响应式的可折叠菜单。

了解列表组折叠组件

Bootstrap 的列表组折叠组件允许用户通过点击列表项来展开或折叠内容。这个组件由一个无序列表或有序列表组成，每个列表项包含一个折叠标题和内容区域。当用户点击折叠标题时，内容区域会展开或折叠。

准备工作

在开始之前，请确保你已经引入了 Bootstrap 的 CSS 和 JS 文件。你可以从 Bootstrap 官网下载或使用 CDN 链接。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

创建列表组折叠菜单

以下是创建一个简单的列表组折叠菜单的步骤：

  1. HTML 结构：首先，我们需要一个无序列表或有序列表作为菜单的容器。
<ul class="list-group">
  <li class="list-group-item">
    <a href="#" class="list-group-item-action" data-bs-toggle="collapse" data-bs-target="#item1" aria-expanded="false" aria-controls="item1">
      菜单项 1
    </a>
    <div class="collapse" id="item1">
      <div class="card card-body">
        菜单项 1 的内容...
      </div>
    </div>
  </li>
  <!-- 更多菜单项 -->
</ul>

  1. CSS 样式：Bootstrap 提供了一些内置的样式，但如果你需要自定义样式，可以通过添加额外的 CSS 类来实现。

  2. JavaScript 交互：使用 Bootstrap 的 JavaScript 插件来添加折叠功能。

<script>
  document.addEventListener('DOMContentLoaded', function () {
    var coll = document.getElementsByClassName('list-group-item-action');
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener('click', function () {
        this.classList.toggle('active');
        var content = this.nextElementSibling;
        if (content.style.display === 'block') {
          content.style.display = 'none';
        } else {
          content.style.display = 'block';
        }
      });
    }
  });
</script>

响应式设计

Bootstrap 的列表组折叠组件是响应式的，这意味着它会根据屏幕大小自动调整其行为。例如，在较小的屏幕上，内容可能会默认折叠，并且在点击标题时展开。

实战案例

下面是一个简单的列表组折叠菜单的例子，你可以根据自己的需求进行修改和扩展。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 列表组折叠菜单</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
  <ul class="list-group">
    <li class="list-group-item">
      <a href="#" class="list-group-item-action" data-bs-toggle="collapse" data-bs-target="#item1" aria-expanded="false" aria-controls="item1">
        菜单项 1
      </a>
      <div class="collapse" id="item1">
        <div class="card card-body">
          菜单项 1 的内容...
        </div>
      </div>
    </li>
    <!-- 更多菜单项 -->
  </ul>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

通过以上步骤，你可以轻松地使用 Bootstrap 列表组折叠组件来创建一个响应式的可折叠菜单。希望这篇文章能够帮助你快速上手并应用到你的项目中。

-- 展开阅读全文 --