我怎样才能一次展示一个？
Demo: 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>
引导手风琴。 jQuery 与 HTML 属性
有两种方法可以解决您的问题。您可以使用 Javascript 或分配 HTML 属性。但首先我们要简化代码。
起点
-
col-md-4 col-xs-4等于col-xs-4.
- 引导程序包含对齐类。您可以使用
text-right类而不是style="text-align: right;".
- 请注意，
.row类有属性margin-right: -15px; margin-left: -15px;. You 需要放置 .row在一个.container or .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
- Add the
.toggle类到行。这些块将切换相邻块的状态。
- Use the
.collapse使块可折叠的类。
- The script does two actions:
- 隐藏除下一个之外的所有展开的 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 属性
注意：这个方法有效结合面板组件。可折叠块必须是该块的子级，该块具有panel class.
- 将所有块包裹起来
<div class="panel"></div>.
- Use the
.collapse使块可折叠的类。赋予这些块独特的ids.
- Add 一组属性对于每个切换块：
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
