Question

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

我没有尝试过js，但是我想可以通过脚本来实现。我还在源代码中看到，当导航栏展开时，导航栏切换会显示：无，这是一个问题。

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

$('#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>

导航栏扩展，但一个子菜单始终折叠

2 个答案: