Bootstrap：折叠导航栏 - 没有选项

Question

我在创建导航栏（包含多个下拉菜单）后尝试添加可折叠的导航栏功能，但我似乎无法让它工作。我想这可能是因为我有太多嵌套的 div 并且不确定要显示什么？

这是一个fiddle，它代表实际行为（有一些 jQuery 我没有包括在内）：

.html

<nav class="navbar navbar-default">
  <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="collapsible-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
     </button>
    </div>

      <div class="row collapse navbar-collapse" id="collapsible-navbar">
        <div class="col-sm-2 text-center">
          <ul class="nav navbar-nav navbar-left collapse navbar-collapse" id="collapsible-navbar">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Testimonials</a></li>
            <ul class="dropdown-nav row clients">
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 1</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 2</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 3</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 4</a></li>
            </ul>
          </ul>
        </div>
        <div class="col-sm-2">
          <ul class="nav navbar-nav navbar-left">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a></li>
            <ul class="dropdown-nav row locations">
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Newton, MA</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Peadbody, MA</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Houston, TX</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Dallas, TX</a></li>
            </ul>
          </ul>
        </div>
        <div class="col-sm-4 text-center">
            <img src="smallw_red_shaddow_small.jpg" width="152" height="75" alt=""/>
        </div>
        <div class="col-sm-2">
          <ul class="nav navbar-nav navbar-right">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Information</a></li>
                <ul class="dropdown-nav row information">
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">The Program</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">The Food</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">SMT</a></li>
                    <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Vibratrim</a></li>
                </ul>
          </ul>
        </div>
        <div class="col-sm-2">
          <ul class="nav navbar-nav navbar-right">
            <li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a></li>
                <ul class="dropdown-nav row sign_in">
                    <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">A</a></li>
                    <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">B</a></li>
                    <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">C</a></li>
                </ul>
          </ul>
        </div>
      </div>
</div>
</nav>

似乎当我单击“三明治”图标时，它并没有切换，collapse 的 display: none 属性

Answer 1

我注意到的第一件事是您没有正确定位按钮元素中的导航栏。

应该是data-target="#collapsible-navbar"，你还应该在按钮元素中添加aria-expanded="false"。

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-navbar aria-expanded="false"">