引导折叠。如何一次只扩展一个div

Posted

技术标签:

【中文标题】引导折叠。如何一次只扩展一个div【英文标题】：Bootstrap Collapse. How to expand only one div at a time 【发布时间】：2016-10-11 17:26:24 【问题描述】：

我怎样才能一次显示一个？

演示：http://jsfiddle.net/tvvq59wv/

$('.collapser').click(function() 
  $(this).next().collapse('toggle');
);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div id="myGroup">
  <div aria-controls="collapseExample" aria-expanded="false" data-toggle="collapse" class=" row collapsed collapser" style="background: #ddd;">
    <div class="col-md-4 col-xs-4">asfa asf asfasf afsf afsasf asf asf asf adf</div>
    <div class="col-md-4 col-xs-4">test</div>
    <div class="col-md-4 col-xs-4" style="text-align: right;">asf afsas afsasf asf</div>
  </div>

  <div id="collapseExample" class="collapse" style="height: 0px;">
    <div class="well">asf t1</div>
  </div>

  <div aria-controls="collapseExample" aria-expanded="false" data-toggle="collapse" class=" row collapsed collapser" style="background: #ddd;">
    <div class="col-md-4 col-xs-4">asfa afsasf</div>
    <div class="col-md-4 col-xs-4">test sd sdgs sd asf asfas afasf asfasfgd</div>
    <div class="col-md-4 col-xs-4" style="text-align: right;">asf afsas afsasf asf</div>
  </div>

  <div id="collapseExample" class="collapse" style="height: 0px;">
    <div class="well">asf t1</div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

提前致谢！

【问题讨论】：

how do you make twitter bootstrap accordion keep one group open的可能重复 【参考方案1】：

引导手风琴。 jQuery 与 html 属性

有两种方法可以解决您的问题。您可以使用 javascript 或分配 HTML 属性。但首先我们简化了代码。

起点

    col-md-4 col-xs-4 等于 col-xs-4。 引导程序包含alignment classes。您可以使用text-right 类代替style="text-align: right;"。 请注意，.row 类具有属性margin-right: -15px; margin-left: -15px;。你 need to place .row 在 .container 或 .container-fluid 中。 style="height: 0px;" 是不必要的。 collapse 类将display 属性设置为none。 id 必须是唯一的。

让我们从这段代码开始：

https://jsfiddle.net/glebkema/a5q9mgho/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.text 
  margin-bottom: 20px;
  padding: 15px;


.mauve  background: #c9f 
.mint   background: #9fc 
.peach  background: #fc9 

.text.mauve  background: #edf 
.text.mint   background: #dfe 
.text.peach  background: #fed 
<div id="myGroup" class="container">

  <div class="row mint">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row">
    <div class="text mint">text</div>
  </div>

  <div class="row mauve">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row">
    <div class="text mauve">text</div>
  </div>

  <div class="row peach">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row">
    <div class="text peach">text</div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

通过 jQuery

​​>
    将.toggle 类添加到行。这些块将切换相邻块的状态。 使用.collapse 类使块可折叠。 脚本执行两个操作： 隐藏所有展开的 div，下一个除外。 切换下一个 div。

http://jsfiddle.net/glebkema/73gtkvjt/

$('.toggle').click(function() 
  if ( !$(this).next().hasClass('in') ) 
    $(this).parent().children('.collapse.in').collapse('hide');
  
  $(this).next().collapse('toggle');
);
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.text 
  margin-bottom: 20px;
  padding: 15px;


.mauve  background: #c9f 
.mint   background: #9fc 
.peach  background: #fc9 

.text.mauve  background: #edf 
.text.mint   background: #dfe 
.text.peach  background: #fed 
<div id="myGroup" class="container">

  <div class="row mint toggle">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row collapse in">
    <div class="text mint">text</div>
  </div>

  <div class="row mauve toggle">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row collapse">
    <div class="text mauve">text</div>
  </div>

  <div class="row peach toggle">
    <div class="col-xs-4">left</div>
    <div class="col-xs-4 text-center">center</div>
    <div class="col-xs-4 text-right">right</div>
  </div>
  <div class="row collapse">
    <div class="text peach">text</div>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

通过 HTML 属性

注意此方法有效in conjunction the panel component。可折叠块必须是具有panel 类的块的子级。

    将所有块包装在&lt;div class="panel"&gt;&lt;/div&gt;中。 使用.collapse 类使块可折叠。为这些块提供唯一的ids。 将a set of attributes 添加到每个切换块： 
role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"

https://jsfiddle.net/glebkema/L02ao1n9/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.panel 
  border: 0;
  margin-bottom: 0;


.text 
  margin-bottom: 20px;
  padding: 15px;


.mauve  background: #c9f 
.mint   background: #9fc 
.peach  background: #fc9 

.text.mauve  background: #edf 
.text.mint   background: #dfe 
.text.peach  background: #fed 
<div id="myGroup" class="container">
  <div class="panel">

    <div class="row mint" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      <div class="col-xs-4">left</div>
      <div class="col-xs-4 text-center">center</div>
      <div class="col-xs-4 text-right">right</div>
    </div>
    <div id="collapseOne" class="row collapse in">
      <div class="text mint">text</div>
    </div>

    <div class="row mauve" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
      <div class="col-xs-4">left</div>
      <div class="col-xs-4 text-center">center</div>
      <div class="col-xs-4 text-right">right</div>
    </div>
    <div id="collapseTwo" class="row collapse">
     <div class="text mauve">text</div>
    </div>
    
    <div class="row peach" role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
      <div class="col-xs-4">left</div>
      <div class="col-xs-4 text-center">center</div>
      <div class="col-xs-4 text-right">right</div>
    </div>
    <div id="collapseThree" class="row collapse">
      <div class="text peach">text</div>
    </div>
    
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：

非常感谢！有没有办法添加和删除活动类？ @user1652920 Bootstrap 自己制作。这两种方法都只是向他解释了对他的要求。 @user1652920 您可以将in 添加到任何row collapse 类中，以使该div 默认展开。我在答案中更改了代码 sn-ps。 非常感谢 Gleb！ 我尝试使用 HTML attr 但无法获得 ***.com/questions/50955183/…

以上是关于引导折叠。如何一次只扩展一个div的主要内容，如果未能解决你的问题，请参考以下文章

滑动切换 |一次只打开一个 div

折叠 div 内的引导工具提示位置

引导折叠 div 上的 fitVids() - 在单个 iframe 上打开多个视频的小错误

引导下拉菜单在悬停时无法正常工作

可折叠的 div，但仅在移动设备上

如何展开和折叠使用 aria-expanded 属性制作的 div？