Bootstrap双折叠菜单Navbar：打开新菜单时自动关闭已展开菜单

嗨，这个问题我之前也碰到过！Bootstrap的collapse组件默认允许同时展开多个面板，所以才会出现你看到的内容叠加情况。要实现点击一个菜单时自动关闭另一个，只需要利用Bootstrap内置的data-parent属性来实现互斥控制就可以了，步骤很简单：

• 给你的<nav>元素添加一个唯一的id，比如mainNavbar，作为父容器标识
• 给两个<div class="collapse navbar-collapse">容器都加上data-parent="#mainNavbar"属性，将它们归为同一组

这样设置后，当你点击打开其中一个collapse菜单时，同组内已经展开的另一个菜单就会自动关闭，不会再出现内容叠加的情况了。

下面是修改后的完整代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One&amp;subset=latin-ext" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<body style="background-color:#E5E5E5;">
  <header>
    <!-- 给nav添加唯一id作为父容器 -->
    <nav class="navbar navbar-expand-md navbar-light bg-light" id="mainNavbar">
      <a class="navbar-brand" href="#" style="font-family: 'Fjalla One', sans-serif;">Site.com</a>
      <!-- links toggle -->
      <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#links" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
      <!-- account toggle -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-user"></i></button>
      
      <!-- 给collapse添加data-parent关联父容器 -->
      <div class="collapse navbar-collapse" id="links" data-parent="#mainNavbar">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active"><a class="nav-link" href="#">Link 1</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 2</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 3</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 4</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Link 5</a></li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Other</a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Dropdown 1</a>
              <a class="dropdown-item" href="#">Dropdown 2</a>
              <a class="dropdown-item" href="#">Dropdown 3</a>
            </div>
          </li>
        </ul>
      </div>
      
      <!-- 给collapse添加data-parent关联父容器 -->
      <div class="collapse navbar-collapse" id="account" data-parent="#mainNavbar">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <footer class="footer"></footer>
</body>

html { position: relative; min-height: 100%; }
body { margin-bottom: 60px; }
.footer { position: absolute; bottom: 0; width: 100%; height: 60px; line-height: 60px; background-color: #AD2D2D; }

如果你偏好自定义JS的方式，也可以通过监听collapse的展开事件来手动关闭其他菜单，代码如下：

$('.navbar-collapse').on('show.bs.collapse', function () {
  $('.navbar-collapse').not(this).collapse('hide');
});

不过第一种方法更简洁，直接利用Bootstrap原生功能就能搞定，没必要额外写JS啦~

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