Bootstrap 4 在打开另一个菜单之前，Bootstrap 4导航栏是否可以切换按钮，关闭先前打开的菜单？

我有一个引导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>

数据目标属性接受逗号分隔的CSS选择器列表。因此，您可以添加另一个选择器，如

.navbar collapse.show

，以切换当前打开的其他菜单

太棒了！非常感谢您回答Zim。

<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>