Question

我使用主题中的代码创建了一个导航栏，其中包含两个折叠菜单，但当一个处于活动状态然后打开第二个时，第二个的折叠内容会添加到第一个内容的末尾。当我们打开第二个菜单时如何关闭其他菜单？

＆＃13;

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  /* Vertically center the text there */
  background-color: #AD2D2D;
}

＆＃13;

<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 class="navbar navbar-expand-md navbar-light bg-light">
      <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>
      <div class="collapse navbar-collapse" id="links">
        <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>
      <div class="collapse navbar-collapse" id="account">
        <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>

＆＃13;

Answer 1

为崩溃show事件添加处理程序，如下所示......

$('#links').on('show.bs.collapse', function () {
  $('#account').collapse("hide");
})
$('#account').on('show.bs.collapse', function () {
  $('#links').collapse("hide");
})

https://www.codeply.com/go/iBT3FzY4a2

导航栏有两个折叠菜单

1 个答案: