当前位置：theitroad>jQuery Bootstrap 折叠。如何一次只展开一个div

jQuery Bootstrap 折叠。如何一次只展开一个div

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/37753407/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-26 17:08:11 　来源:igfitidea点击:

Bootstrap Collapse. How to expand only one div at a time

jquerytwitter-bootstrapcollapse

提问by user1652920

how can I go about showing one at a time?

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

Demo: http://jsfiddle.net/tvvq59wv/

演示：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>

Thanks in advance!

提前致谢！

回答by Gleb Kemarsky

Bootstrap Accordion. jQuery vs HTML-attributes

Bootstrap 手风琴。jQuery 与 HTML 属性

There are two ways to solve your issue. You can use Javascript or assign HTML-attributes. But first we have simplify the code.

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

Start point

起点

  1. col-md-4 col-xs-4is equal to col-xs-4.
  2. Bootstrap contains alignment classes. You can use the text-rightclass instead of style="text-align: right;".
  3. Note that the .rowclass has properties margin-right: -15px; margin-left: -15px;. You need to place.rowwithin a .containeror .container-fluid.
  4. style="height: 0px;"is unnecessary. The collapseclass set the displayproperty as none.
  5. idmust be unique.
  1. col-md-4 col-xs-4等于col-xs-4。
  2. Bootstrap 包含对齐类。您可以使用text-right类而不是style="text-align: right;".
  3. 请注意，.row该类具有属性margin-right: -15px; margin-left: -15px;。您需要放置.row在 a.container或 中.container-fluid。
  4. style="height: 0px;"是不必要的。该collapse级设置display财产none。
  5. id必须是唯一的。

Let us start with this code:

让我们从这段代码开始：

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

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>

By jQuery

通过 jQuery

  1. Add the .toggleclass to rows. These blocks will toggle the state of the neighboring blocks.
  2. Use the .collapseclass to make blocks collapsible.
  3. The script does two actions:
    • Hide all expanded divs except the next one.
    • Toggle the next div.
  1. 将.toggle类添加到行。这些块将切换相邻块的状态。
  2. 使用.collapse该类使块可折叠。
  3. 该脚本执行两个操作：
    • 隐藏除下一个之外的所有展开的 div。
    • 切换下一个 div。

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

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>

By HTML-attributes

通过 HTML 属性

N.B. This method works in conjunction the panel component. Collapsible blocks must to be children of the block, which has the panelclass.

注意此方法与面板组件结合使用。可折叠块必须是具有panel该类的块的子项。

  1. Wrap all blocks in <div class="panel"></div>.
  2. Use the .collapseclass to make blocks collapsible. Give these blocks unique ids.
  3. Add a set of attributesto each toggle block:
  1. 将所有块包裹在<div class="panel"></div>.
  2. 使用.collapse该类使块可折叠。赋予这些块唯一的ids。
  3. 为每个切换块添加一组属性：
role="button" data-toggle="collapse" data-parent="#myGroup" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"

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

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>

相关推荐

使用 jQuery select 更改它不会显示选定的选项

使用 jQuery select 更改它不会显示选定的选项

使用 jQuery 单击后更改链接 href

使用 jQuery 单击后更改链接 href

jQuery Laravel Blade 使用 $(document).ready 函数

jQuery Laravel Blade 使用 $(document).ready 函数

jquery 开发人员的良好 jQuery Mobile 演练或教程？

jquery 开发人员的良好 jQuery Mobile 演练或教程？