Bootstrap 3双导航栏移动端联动展开/折叠问题求助

这个问题我之前碰到过好多次，核心原因很简单：Bootstrap 3的折叠功能是通过触发元素的data-target属性和折叠容器的id/选择器来关联的，如果两个导航栏的折叠按钮都指向了同一个选择器（比如都用.navbar-collapse），或者折叠容器的id重复了，就会出现点一个俩都展开/折叠的情况。

下面是具体的解决步骤：

• 给每个导航栏的折叠容器设置唯一的id，绝对不能重复
• 让每个导航栏的折叠按钮（就是那个移动端的汉堡按钮）的data-target属性，精准指向对应折叠容器的id
• 确保每个导航栏的结构完全独立，各自拥有自己的.navbar-header、折叠按钮和折叠容器

完整的正确示例代码 #

<!-- 第一个Default样式导航栏 -->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- 导航栏头部 -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-default" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Default Nav</a>
    </div>

    <!-- 折叠菜单 -->
    <div class="collapse navbar-collapse" id="navbar-collapse-default">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<!-- 第二个Inverse样式导航栏 -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- 导航栏头部 -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-inverse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Inverse Nav</a>
    </div>

    <!-- 折叠菜单 -->
    <div class="collapse navbar-collapse" id="navbar-collapse-inverse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

你可以看到，两个折叠容器的id分别是navbar-collapse-default和navbar-collapse-inverse，对应的折叠按钮data-target也分别指向这两个id，这样它们的折叠状态就完全独立了，不会再互相影响啦。

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