可折叠按钮-引导3.3.4

Collapsible Buttons - Bootstrap 3.3.4

本文关键字：引导 按钮 可折叠      更新时间：2023-09-26

我使用bootstrap可折叠按钮组。我希望一次只显示一个组框。我在js中创建了一个函数来删除"in"类并更改aria扩展语句，但我认为这是无用的，因为人们正在使用data-parent="#myGroup"。

显然data-parent="#myGroup"不适合我的原因。

我试过在单个元素和按钮和折叠组上使用data-parent，但仍然不能使它工作。

在这个小提琴中，您可以看到可以显示多个组。当我按下按钮时，我想让其他人隐藏起来。

 <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>
<p>
  <button id="a" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#AA" aria-expanded="false" aria-controls="AA" data-parent="#myGroup">
  A
  </button>
  <button id="b" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#BB" aria-expanded="false" aria-controls="BB" data-parent="#myGroup">
    B
  </button>
    <button id="c" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#CC" aria-expanded="false" aria-controls="CC" data-parent="#myGroup">
    C
  </button>
      <button id="d" class="btn btn-primary" type="button" data-toggle="collapse" data-target="#DD" aria-expanded="false" aria-controls="DD" data-parent="#myGroup">
    D
  </button> 
</p>
<div class="collapse" id="AA" data-parent="#myGroup">
  <div class="card card-block">
   bla bla bla
  </div>
</div>
<div class="collapse" id="BB" data-parent="#myGroup">
  <div class="card card-block">
bla bla bla
  </div>
</div>

<div class="collapse" id="CC" data-parent="#myGroup">
  <div class="card card-block">
    bla bla bla
  </div>
  </div>
<div class="collapse" id="DD" data-parent="#myGroup">
  <div class="card card-block">
    bla bla bla
      </div>
    </div>
</body>
</html>

Post from: ambs on duplicate question: CSS Collapsible groups - Bootstrap

 
 <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>

相关文章：