javascript - 导航栏已扩展但有一个子菜单总是折叠

Question

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

我没有尝试过 js，但我想可以通过脚本来完成。我还在源代码中看到，当导航栏展开时，navbar-toggler 会显示:无，这是一个问题。

这是我的导航栏和一个控制 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();
}

它应该可以解决问题。