[英]Bootstrap make accordion collapse by clicking heading?
How can I make my accordion collapse after clicking the heading rather than just the text in the heading? 单击标题后如何使手风琴折叠而不仅仅是标题中的文字? Right now it only collapses when I click "Major".
现在它只在我点击“Major”时才会崩溃。
JSFiddle: http://jsfiddle.net/P63pp/ JSFiddle: http : //jsfiddle.net/P63pp/
My accordion html: 我的手风琴html:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="accordian" href="#collapseMajor">
Major
</a>
</h4>
</div>
<div id="collapseMajor" class="panel-collapse collapse in">
<div class="panel-body">
<div class="checkbox">
<label>
<input type="checkbox" id="All" title="major" class="check-all-majors" checked>
All Majors
</label>
</div>
<div class="checkbox-group">
<div class="checkbox">
<label>
<input type="checkbox" id="AFM" title="major" class="check-majors" checked>AFM
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="ARTS" title="major" class="check-majors" checked>ARTS
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="CHEM" title="major" class="check-majors" checked>CHEM
</label>
</div>
</div>
</div>
</div>
</div>
You need to make the a
tag a block element and apply the panel-heading padding the a
. 您需要将
a
标记作为块元素并应用面板标题填充a
。 You could create a panel-accordion
panel and use that for all accordion panels. 您可以创建一个
panel-accordion
面板,并将其用于所有手风琴面板。 Demo. 演示。
.panel-accordion .panel-heading
{
padding: 0;
}
.panel-accordion .panel-heading a
{
display: block;
padding: 10px 15px;
}
Thanks dfsq! 谢谢dfsq! If you remove the tag, the underline behavior goes away - works even better!
如果删除标记,下划线行为就会消失 - 效果会更好!
I also moved the other attributes up to the panel-heading div - away from the tag that bootstrap sample code gives you. 我还将其他属性移动到面板标题div - 远离bootstrap示例代码为您提供的标记。 This makes the panel-heading act in the same way as the old did...
这使得面板标题的行为与旧的一样......
<div class="panel-heading" role="tab" id="headingOne" data-target="#collapseOne" data-toggle="collapse" data-parent="#accordion">
<h4 class="panel-title">Collapsable Group Item #1</h4>
</div>
I added some CSS on the page to change the cursor: 我在页面上添加了一些CSS来更改光标:
<style> .panel-heading { cursor: pointer; } </style>
You can change HTML a little: 您可以稍微更改HTML:
<div class="panel-heading" data-toggle="collapse" data-target="#collapseMajor">
<h4 class="panel-title">
<a href="#collapseMajor">Major</a>
</h4>
</div>
So just add data-toggle="collapse" data-target="#collapseMajor"
to .panel-heading
div. 所以只需将
data-toggle="collapse" data-target="#collapseMajor"
到.panel-heading
div。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.