Bootstrap 4导航栏切换按钮，在打开另一个菜单之前关闭之前打开的菜单吗

Question

我有一个Bootstrap 4导航栏，带有两个可折叠菜单(id"links"和id"account"(。我希望两个菜单不可能同时打开。因此，例如；链接"；菜单已经打开；账户"；触发器将关闭"；链接"；在打开"菜单"之前；账户"；菜单有人知道如何做到这一点吗？这是我的代码：

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<div class="container">

<a class="navbar-brand mb-1 flex-grow-0" href="#">
site_name<span class="d-none d-md-inline ml-4">|</span>
</a>

<!-- links toggle -->
<button class="navbar-toggler border-0 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 border-0" type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-user"></i>
</button>
<div class="collapse navbar-collapse justify-content-start" style="flex-grow: 1;" id="links">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Opinion</a>
</li>
</ul>
</div>

<div class="collapse navbar-collapse justify-content-end" style="flex-grow: 0;" id="account">
<ul class="navbar-nav justify-content-end text-right">
<li class="nav-item">
<a class="btn btn-primary mb-3" href="{path='account/registration'}">Join</a>
</li>
<li class="nav-item">
<a class="btn btn-secondary mt-2 mb-3" data-toggle="modal" href="#loginModal" aria-expanded="false" aria-controls="loginModal">Log in</a>
</li>
</ul>
</div>

</div>
</nav>

Answer 1

data-target属性接受一个以逗号分隔的CSS选择器列表。因此，您可以添加另一个选择器，如.navbar-collapse.show，以切换当前打开的其他菜单。。。

https://codeply.com/p/vavTw6D8Zl

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand mb-1 flex-grow-0" href="#"> site_name<span class="d-none d-md-inline ml-4">|</span>
</a>
<!-- links toggle -->
<button class="navbar-toggler border-0 order-first" type="button" data-toggle="collapse" data-target="#links,.navbar-collapse.show" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<!-- account toggle -->
<button class="navbar-toggler border-0" type="button" data-toggle="collapse" data-target="#account,.navbar-collapse.show" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-user"></i>
</button>
<div class="collapse navbar-collapse justify-content-start" style="flex-grow: 1;" id="links">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Opinion</a>
</li>
</ul>
</div>
<div class="collapse navbar-collapse justify-content-end" style="flex-grow: 0;" id="account">
<ul class="navbar-nav justify-content-end text-right">
<li class="nav-item">
<a class="btn btn-primary my-md-0 my-2" href="{path='account/registration'}">Join</a>
</li>
<li class="nav-item">
<a class="btn btn-secondary my-md-0 my-2" data-toggle="modal" href="#loginModal" aria-expanded="false" aria-controls="loginModal">Log in</a>
</li>
</ul>
</div>
</div>
</nav>