我在创建导航栏（包含多个下拉菜单）后试图添加可折叠导航栏功能，但似乎无法使其工作。我想可能是因为嵌套的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属性