Bootstrap：折叠导航栏 - 无选项

Question

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

这是一个fiddle，sorta代表实际行为（我还没有包含一些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>

似乎当我点击“三明治”图标时，它没有切换，display: none的{​​{1}}属性

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