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

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

1 个答案: