jquery – Bootstrap折叠.如何一次只扩展一个div

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

起点

> col-md-4 col-xs-4等于col-xs-4.
> Bootstrap包含alignment classes.您可以使用text-right类而不是style =“text-align：right;”.
>请注意,.row类具有margin-right属性：-15px; margin-left：-15px;.你need to place.在一个.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.可折叠块必须是块的子级,其具有面板类.

>在< div class =“panel”>< / div>中包裹所有块.
>使用.collapse类使块可折叠.给这些块提供唯一的ID.
>将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>