Bootstrap 4左侧垂直导航栏始终折叠状态问题咨询

Hey Jeff, 刚看到你的问题，我来帮你梳理下可能导致导航栏一直折叠的几个常见原因，以及对应的解决办法：

1. 缺失Bootstrap折叠功能依赖的JS文件 #

Bootstrap 4的折叠（Collapse）组件依赖jQuery和Popper.js才能正常工作，如果只引入了Bootstrap的CSS，没加这两个JS文件，点击折叠按钮肯定没反应。

检查你的HTML底部，要按这个顺序引入：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- 再引入Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- 最后引入Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

2. 折叠组件的属性/ID不匹配 #

折叠功能的核心是触发按钮和导航内容容器的关联，必须保证这几个属性严格对应：

• 触发按钮的data-target值要和导航内容容器的id完全一致
• 触发按钮的aria-controls也要对应导航容器的id
• 导航内容容器必须带有collapse navbar-collapse类

举个正确的垂直导航结构示例：

<!-- 垂直导航栏外层 -->
<nav class="navbar navbar-dark bg-dark fixed-left">
  <!-- 折叠触发按钮 -->
  <button class="navbar-toggler" type="button" 
          data-toggle="collapse" 
          data-target="#verticalNavContent" 
          aria-controls="verticalNavContent" 
          aria-expanded="false" 
          aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- 可折叠的导航内容 -->
  <div class="collapse navbar-collapse" id="verticalNavContent">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
    </ul>
  </div>
</nav>

3. 自定义CSS强制隐藏了导航内容 #

如果你写了自定义CSS，比如给.collapse类加了display: none !important，或者给导航容器加了固定的隐藏样式，那即使Bootstrap的JS想展开也没用。

检查你的自定义样式，有没有类似这样的代码：

/* 这种写法会覆盖Bootstrap的展开样式，需要删掉 */
.collapse {
  display: none !important;
}

4. 滚动显示逻辑的代码错误 #

你提到是滚动过全屏intro后才显示导航栏，那可能你的JS代码在初始化时，错误地给导航内容加了collapse类但没加show，或者滚动触发后没有正确切换展开状态。

比如正确的滚动逻辑应该是这样的（假设你的intro区域类是intro-fullscreen）：

$(document).ready(function() {
  // 初始化时先隐藏导航栏
  $('.fixed-left').addClass('d-none');

  $(window).scroll(function() {
    var introHeight = $('.intro-fullscreen').height();
    // 滚动超过intro区域时显示导航栏，并且默认展开
    if ($(window).scrollTop() > introHeight) {
      $('.fixed-left').removeClass('d-none').addClass('d-block');
      $('#verticalNavContent').addClass('show');
    } else {
      $('.fixed-left').addClass('d-none').removeClass('d-block');
    }
  });
});

你可以先从检查JS依赖开始，这是最常见的坑～如果还是不行，把你的完整代码片段贴出来，我再帮你细查。

内容的提问来源于stack exchange，提问作者Jefferson