如何用jQuery实现导航栏折叠？新手求助移动端导航切换JS代码

嘿，别慌！作为刚接触HTML/CSS/JS的新手，遇到这个导航栏折叠的问题太正常了～我来给你两种解决方案，从最省心的原生Bootstrap方法，到自己写JS的方式都讲清楚，包你看懂！

先补全你的导航栏结构（重要！） #

首先你的代码片段有点不完整，我先给你补全一个标准的Bootstrap导航栏结构，这样后面的功能才能正常工作：

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- 品牌Logo -->
    <a class="navbar-brand" href="index.html" id="movielogo">
      <img src="你的Logo图片路径" alt="电影Logo" />
    </a>

    <!-- 移动端折叠按钮 -->
    <button class="navbar-toggler" type="button" id="navbarToggler" aria-label="切换导航">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 需要折叠的导航内容 -->
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">电影列表</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- 这里放页面其他内容 -->
</body>

方法一：用Bootstrap原生功能（推荐！零手写JS） #

Bootstrap其实已经帮你封装好了折叠的逻辑，不需要自己写JS，只需要给按钮加两个data属性就行，超级省心：

修改你的折叠按钮代码，加上data-toggle="collapse"和data-target="#navbarContent"（#navbarContent就是你要折叠的内容容器的ID）：

<button class="navbar-toggler" type="button" 
        data-toggle="collapse" data-target="#navbarContent"
        aria-controls="navbarContent" aria-expanded="false" aria-label="切换导航">
  <span class="navbar-toggler-icon"></span>
</button>

然后一定要引入Bootstrap的JS文件（因为折叠功能依赖它），在页面的</body>标签之前加上这段代码：

• 如果是Bootstrap 4版本：

<!-- 先引入jQuery（Bootstrap 4必须依赖它） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

• 如果是Bootstrap 5版本（不需要jQuery）：

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

这样点击移动端的折叠按钮，导航内容就会自动展开/收起啦！这是新手最友好的方式，不用写一行自己的JS代码。

方法二：自己写onClick的JS代码（手动实现） #

如果你想自己动手写JS逻辑，也很简单，核心就是切换导航内容的显示/隐藏类：

1. 先给折叠按钮加上onClick事件：

<button class="navbar-toggler" type="button" onClick="toggleNavbar()" aria-label="切换导航">
  <span class="navbar-toggler-icon"></span>
</button>

2. 在页面的<script>标签里写toggleNavbar函数：

function toggleNavbar() {
  // 获取要折叠的导航内容容器
  const navbarContent = document.getElementById('navbarContent');
  // 获取折叠按钮本身（用来更新无障碍属性）
  const togglerBtn = document.getElementById('navbarToggler');

  // 判断当前是否是展开状态
  const isExpanded = navbarContent.classList.contains('show');

  if (isExpanded) {
    // 如果是展开状态，就收起：移除show类，添加collapse类
    navbarContent.classList.remove('show');
    navbarContent.classList.add('collapse');
    // 更新按钮的无障碍属性
    togglerBtn.setAttribute('aria-expanded', 'false');
  } else {
    // 如果是收起状态，就展开：移除collapse类，添加show类
    navbarContent.classList.remove('collapse');
    navbarContent.classList.add('show');
    // 更新按钮的无障碍属性
    togglerBtn.setAttribute('aria-expanded', 'true');
  }
}

解释一下：Bootstrap的collapse类默认让元素隐藏，show类让元素显示，我们通过切换这两个类来实现折叠效果。另外更新aria-expanded属性是为了符合无障碍标准，让屏幕阅读器能识别按钮的状态。

最后小提醒 #

• 确保你的Bootstrap CSS文件已经正确引入了（不然导航栏的样式会乱）
• 如果你用方法一，一定要记得引入Bootstrap的JS文件，不然点击按钮没反应

内容的提问来源于stack exchange，提问作者Jens O. Anders Olsén