javascript - Bootstrap：单击时将类“折叠”添加到其他按钮

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;
});