选中复选框后,Twitter Bootstrap 3崩溃 [英] Twitter Bootstrap 3 collapse when checkbox checked
本文介绍了选中复选框后,Twitter Bootstrap 3崩溃的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
手风琴必须在选中复选框时折叠。并且必须在未选中时隐藏。
Accordion have to collapse on checked checkbox. And must be hidden when it's uncheked.
这是代码: http://jsfiddle.net/UwL5L/2/
为什么不检查?
<div class="panel-group driving-license-settings" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<input type="checkbox" value=""> I have Driver License
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="driving-license-kind">
<div class="checkbox">
<input type="checkbox" value="">A
</div>
<div class="checkbox">
<input type="checkbox" value="">B
</div>
<div class="checkbox">
<input type="checkbox" value="">C
</div>
<div class="checkbox">
<input type="checkbox" value="">D
</div>
<div class="checkbox">
<input type="checkbox" value="">E
</div>
</div>
</div>
</div>
</div>
</div>
推荐答案
更新:下面有一个更好的答案... 此处 - > *
UPDATE : There is a Better Answer Below ... Here -> *
JS (小提琴: http://jsfiddle.net/h44PJ/ :
$('.collapse').collapse();
// Don't collapse on checkbox click
$('.panel-heading h4 a input[type=checkbox]').on('click', function(e) {
e.stopPropagation();
});
// Cancel show event if not checked
$('#collapseOne').on('show.bs.collapse', function(e) {
if(!$('.panel-heading h4 a input[type=checkbox]').is(':checked'))
{
return false;
}
});
UPDATE (小提琴: http://jsfiddle.net/h44PJ/567/ ):
$('.collapse').collapse();
$('.panel-heading h4 a input[type=checkbox]').on('click', function(e) {
e.stopPropagation();
$(this).parent().trigger('click'); // <--- HERE
});
$('#collapseOne').on('show.bs.collapse', function(e) {
if(!$('.panel-heading h4 a input[type=checkbox]').is(':checked'))
{
return false;
}
});
这篇关于选中复选框后,Twitter Bootstrap 3崩溃的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文