分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jquery – Bootstrap折叠.如何一次只扩展一个div，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

$('.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>

提前致谢！

解决方法

Bootstrap手风琴. jQuery vs HTML-attributes

有两种方法可以解决您的问题.您可以使用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>