本文介绍了Jquery手风琴默认不会崩溃的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用bootstrap提供的崩溃插件
这是一个jquery简单插件
I am using collapse plugin provided by bootstrapwhich is a jquery simple plugin
然而它默认崩溃,如何修改以便崩溃项目默认隐藏,只有当我按下标题,然后项目崩溃并显示?谢谢
However it collapse by default, how to modify so that the collapse item is hidden by default, only when i press the header, then the item collapse and show? Thank you
$(document).ready( function () {
$(".collapse").collapse()({
toggle: false,
show: false
});
} );
这是html:
<div class="accordion-group">
<div class="alert alert-info" data-toggle="collapse" href="#collapse1" style="margin-bottom:0px;">
Collapsible #1
</div>
<div id="collapse1" class="accordion-body collapse" style="background-color:#ffffff;">
content1
</div>
<div class="alert alert-info" data-toggle="collapse" href="#collapse2" style="margin-bottom:0px;">
Collapsible #2
</div>
<div id="collapse2" class="accordion-body collapse" style="background-color:#ffffff;">
content2
</div>
推荐答案
对于Bootstrap 3,有些事情发生了变化。以下代码在Bootstrap 3中完成您所需的功能
For Bootstrap 3, some things have changed. The following code accomplishes your desired functionality in Bootstrap 3
如果您希望默认情况下显示面板主体:
If you want the panel body to show by default:
<div id="collapseOne" class="panel-collapse collapse in">
如果您希望默认情况下隐藏面板主体:
If you want the panel body to hide by default:
<div id="collapseOne" class="panel-collapse collapse">
以下是一个例子:
<div class="bs-example">
<div class="panel-group" id="accordion">
<!- Repeat For Next Panel------->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
xxxxxxxxxxxHERE IS THE HEADER CONTENTSxxxxxxxxxxxx
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
xxxxxxxxxxxHERE IS THE BODY CONTENTSxxxxxxxxxxxx
</div>
</div>
</div>
<!- Repeat For Next Panel---(but change <div id="collapseTwo")--->
</div>
</div>
这篇关于Jquery手风琴默认不会崩溃的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!