引导崩溃不止一个DIV显示在点击

问题描述 投票：0回答：1

问题：1，点击第一个按钮，会出现DIV。 2.单击第二个按钮，旁边出现DIV。第一个div也会出现。 3.点击第三个按钮，将出现第三个格，所以做第二和第一。

我想确保一个按钮被按下时，所有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

bootstrap-4
1个回答
0
投票

从这个答案对堆栈溢出（也有重复）：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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.