jquery - 在 Bootstrap 3 中添加不同的折叠菜单

Question

我正在使用两个或多个不同的菜单，我遇到的问题是，第二个折叠与向下切换一起打开？

这是 HTML

<footer>
    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="navbar-header"> 
      <a class="navbar-brand" href="#" data-toggle="collapse" data-target=".navbar-collapse-second">Brand</a>
        <button type="button" class="navbar-toggle overlay-display" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      </div>
      <div class="navbar-collapse collapse">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
       <div class="navbar-collapse-second collapse">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
      <div class="container-fluid" style="background-color:red;">
        <div class="row">
          <div class="col-md-12"> COPYRIGHT </div>
        </div>
      </div>
    </nav>
  </footer>

这是 CSS

            footer > nav > div.navbar-header {
    float: none;
}
footer > nav > div.navbar-header > button {
    display: block;
}
footer > nav > div.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
footer > nav > div.navbar-collapse.collapse {
    display: none!important;
}
footer > nav > div.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
footer > nav > div.navbar-nav>li {
    float: none;
}
footer > nav > div..navbar-nav>li>a {
 padding-top: 10px;
 padding-bottom: 10px;
}

我可以在折叠时添加几个按钮吗？

这是工作 fiddle http://jsfiddle.net/h2scz3q5/

尝试单击 bootom 导航，顶部导航会打开 bootom，当尝试单击 bootom 中的品牌时，发生了奇怪的事情，bootom 处的第一次崩溃没有关闭？

Answer 1

给出独特的目标

在按钮中

<button type="button" class="navbar-toggle overlay-display" data-toggle="collapse" data-target=".navbar-collapse1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

目标div

 <div class="navbar-collapse1 collapse">

HTML:

<footer>
    <nav class="navbar navbar-default navbar-fixed-bottom">
      <div class="navbar-header"> 
      <a class="navbar-brand" href="#" data-toggle="collapse" data-target=".navbar-collapse-second">Brand</a>
        <button type="button" class="navbar-toggle overlay-display" data-toggle="collapse" data-target=".navbar-collapse1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      </div>
      <div class="navbar-collapse1 collapse">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
       <div class="navbar-collapse-second collapse">
        <p class="navbar-text"> <a href="#" class="navbar-link">Username</a> </p>
      </div>
      <div class="container-fluid" style="background-color:red;">
        <div class="row">
          <div class="col-md-12"> COPYRIGHT </div>
        </div>
      </div>
    </nav>
  </footer>

DEMO