引导：添加类“折叠”到其他按钮，当点击一个

Question

我想添加多个可折叠面板到导航栏。到目前为止，当面板2打开时，我设法折叠了面板1。但它不会将按钮1改回折叠状态。当点击按钮2时，有什么方法可以将类“折叠”添加到按钮1？

<div id="header"> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <button type="button" class="btn collapsed" data-toggle="collapse" data-target=".nav-collapse"> 
     <span class="icon-remove"></span> button 1 
     </button> 
     <button type="button" class="btn collapsed" data-toggle="collapse" data-target=".nav-collapse2"> 
     <span class="icon-remove"></span> button 2 
     </button> 
     <a class="brand" href="./index.html">Bootstrap</a> 
     <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li class="active"> 
      <a href="./index.html">Home</a> 
      </li> 
      <li class=""> 
      <a href="./getting-started.html">Get started</a> 
      </li> 
      <li class=""> 
      <a href="./scaffolding.html">Scaffolding</a> 
      </li> 
      <li class=""> 
      <a href="./base-css.html">Base CSS</a> 
      </li> 
     </ul> 
     </div> 
     <div class="nav-collapse2 collapse"> 
     <ul class="nav"> 
      <li class="active"> 
      <a href="./index.html">Home</a> 
      </li> 
      <li class=""> 
      <a href="./getting-started.html">Get started</a> 
      </li> 
      <li class=""> 
      <a href="./scaffolding.html">Scaffolding</a> 
      </li> 
      <li class=""> 
      <a href="./base-css.html">Base CSS</a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </div> 
</div> 

，你可以在这里看到演示：http://jsfiddle.net/Kierlens/3Uet8/

Answer 1

$(".btn").on("vclick", function(){ 
    $(".btn").addClass("collapsed"); 
    $(this).removeClass("collapsed"); 
    return false; 
});