在引導程序中添加不同的摺疊菜單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