Question

问题： 1.单击第一个按钮，显示div。 2.单击第二个按钮，出现下一个div。第一格也出现。 3.单击第三个按钮，出现第三个div，第二个和第一个也出现。

我想确保单击按钮时，除单击的按钮外，所有div都折叠。

    <div class="container">
  <h2>TEST</h2>
  <div  class="btn btn-info" data-toggle="collapse" data-target="#demo">1</div >
    <div  class="btn btn-info" data-toggle="collapse" data-target="#demo2">2</div >
    <div  class="btn btn-info" data-toggle="collapse" data-target="#demo3">3</div >
    <div  class="btn btn-info" data-toggle="collapse" data-target="#demo4">4</div >
   <div  class="btn btn-info" data-toggle="collapse" data-target="#demo5">5</div >
  <div id="demo" class="collapse">
    A
  </div>


  <div id="demo2" class="collapse">
   B
  </div>  <div id="demo3" class="collapse">
   C
  </div>
    </div>  <div id="demo4" class="collapse">
   D
  </div>
  </div>  <div id="demo5" class="collapse">
   E
  </div>
</div>

https://codepen.io/anon/pen/ErwZpx

Answer 1

从关于堆栈溢出的答案（也是重复的）：Collapsible Buttons - Bootstrap 3.3.4

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div id="container">
  <div class="panel">
    <p>
        <button id="a" class="btn btn-primary" data-toggle="collapse" data-target="#AA" data-parent="#container">
          A
        </button>
        <button id="b" class="btn btn-primary" data-toggle="collapse" data-target="#BB" data-parent="#container">
          B
        </button>
    </p>

    <div class="collapse" id="AA">
      <div class="card card-block">
          bla bla bla A
      </div>
    </div>

    <div class="collapse" id="BB">
      <div class="card card-block">
         bla bla bla B
      </div>
    </div>
  </div>
</div>
</body>

编辑：使用div代替按钮：

From this answer on Stack Overflow (also a duplicate): Collapsible Buttons - Bootstrap 3.3.4

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div id="container">
  <h2>TEST</h2>
  <div class="panel">
    <p>
        <div id="1" class="btn btn-primary" data-toggle="collapse" data-target="#demo" data-parent="#container">
          1
        </div>
        <div id="2" class="btn btn-primary" data-toggle="collapse" data-target="#demo2" data-parent="#container">
          2
        </div>
        <div id="3" class="btn btn-primary" data-toggle="collapse" data-target="#demo3" data-parent="#container">
          3
        </div>
        <div id="4" class="btn btn-primary" data-toggle="collapse" data-target="#demo4" data-parent="#container">
          4
        </div>
        <div id="5" class="btn btn-primary" data-toggle="collapse" data-target="#demo5" data-parent="#container">
          5
        </div>
    </p>

    <div class="collapse" id="demo">
      <div class="card card-block">
          A
      </div>
    </div>

    <div class="collapse" id="demo2">
      <div class="card card-block">
         B
      </div>
    </div>

    <div class="collapse" id="demo3">
      <div class="card card-block">
          C
      </div>
    </div>

    <div class="collapse" id="demo4">
      <div class="card card-block">
          D
      </div>
    </div>

    <div class="collapse" id="demo5">
      <div class="card card-block">
          E
      </div>
    </div>
  </div>
</div>
</body>

Bootstrap收起时会折叠多个div

1 个答案: