导航栏已扩展，但有一个子菜单始终处于折叠状态

Question

我有一个引导导航栏，它在 md 断点处扩展，由 2 个子菜单组成，其折叠由两个带有导航栏切换器类的按钮控制。 我想让我的导航栏在 md 处展开，但我的一个子菜单（帐户）始终处于切换状态（触发导航栏下显示内容的按钮）。

我没有尝试过 js，但我想可以通过脚本来完成。 我还在源代码中看到，当导航栏展开时，导航栏切换器得到 display:none 这是一个问题。

这是我的导航栏和用于控制 2 个子菜单折叠的 js 脚本：

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

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <nav class="navbar fixed-top navbar-expand-md navbar-light"> <a class="navbar-brand" href="#">MYSITE</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="fas 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"> <a class="nav-link" href="#">Home Page</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Prices</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Who are we</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> <div class="navbar-collapse collapse" id="account"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Sign up</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Sign in</a> </li> </ul> </div> </nav>

Answer 1

您的 javascript $('#account').collapse()这一部分不会执行，因为帐户 div 尚未加载。 等待它加载然后执行该行，如下所示：

window.onload = function(){
  $('#account').collapse();
}

它应该可以解决问题。

Answer 2

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






    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <nav class="navbar fixed-top navbar-expand-md navbar-light">
        <a class="navbar-brand" href="#">MYSITE</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="fas fa-bars"></i>
        </button>
        <!-- account toggle -->
        <button class="navbar-expand-md" 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"> <a class="nav-link" href="#">Home Page</a>
                </li>
                <li class="nav-item"> <a class="nav-link" href="#">Prices</a>
                </li>
                <li class="nav-item"> <a class="nav-link" href="#">Who are we</a>
                </li>
                <li class="nav-item"> <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
        <div class="collapse navbar-toggleable-sm" id="account">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item"> <a class="nav-link" href="#">Sign up</a>
                </li>
                <li class="nav-item"> <a class="nav-link" href="#">Sign in</a>
                </li>
            </ul>
        </div>
    </nav>