手风琴必须在选中复选框时折叠。当它未经检查时必须隐藏。
这是代码: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>
更新:下面有一个更好的答案... 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;
}
});
更新(小提琴: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;
}
});
这是我的解决方案,通过向复选框添加标签包装而不是超链接来工作:
<div class="checkbox">
<label data-toggle="collapse" data-target="#collapseOne">
<input type="checkbox"/> I have Driver License
</label>
</div>
看它。我做到了,工作正常。
<script>
$(function () {
if($('#id_checkbox').prop('checked'))
{
$('#id_collapse').collapse();
}
});
</script>
你甚至不需要初始化.collapse
。只需将标题更改为:
<h4 class="panel-title">
<input type="checkbox" value="" data-toggle="collapse" data-target="#collapseOne" /> I have Driver License
</h4>
我为折叠手风琴内容开发了一个精美的复选框切换。
<h4 class="panel-title">
<label data-toggle="collapse" data-target="#collapseOne" class="control-toggle">
<input type="checkbox" />
<div class="toggle-button"></div>
</label>
I have Driver License
</h4>
希望你们喜欢 :-)
我遇到了同样的问题,我在这个视频上找到了答案:http://www.lynda.com/Bootstrap-tutorials/Adding-check-box-using-collapse-enhance-usability/161098/176537-4.html我希望它有所帮助!我现在正在使用它来折叠复选框下方的完整div,非常简单。唯一的问题是如果你快速双击它会搞乱,但它通常不会发生。