在引导程序中添加不同的折叠菜单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; 
} 

是我可以添加到了崩溃的几个按钮？

这里正在拨弄 http://jsfiddle.net/h2scz3q5/

尝试点击bootom导航，顶部导航与bootom打开，而当尝试在品牌bootom单击，东西strane正在发生的事情，在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