Question

我有一个Bootstrap手风琴，每个手风琴面板内都有一个复选框。当我选中面板内的复选框时，其父级应该折叠，下一个面板应该打开。

我使用jQuery icheck插件来设置样式复选框。那么我能做些什么才能让手风琴面板坍塌？ FIDDLE

$('.item1').on('ifChecked', function(event){

});

Answer 1

如果我理解正确，你可能想要这样的东西：

更新的代码：

// Toggle
$('.item1').on('ifChecked', function(event){
    $("#collapseOne").collapse("hide");
});
$('.item2').on('ifChecked', function(event){
    $("#collapseTwo").collapse("hide");
});
$('.item3').on('ifChecked', function(event){
    $("#collapseThree").collapse("hide");
});

$("#collapseOne").on("hidden.bs.collapse", function(e){
    $("#collapseTwo").collapse("show");
});
$("#collapseTwo").on("hidden.bs.collapse", function(e){
    $("#collapseThree").collapse("show");
});
$("#collapseThree").on("hidden.bs.collapse", function(e){
    $("#collapseOne").collapse("show");
});

这里的第一个小提琴：http://jsfiddle.net/sap1ruq2/1/

更新小提琴：http://jsfiddle.net/bstjmdLp/

请告诉我这是否是您所需要的！

Answer 2

你可以在你的案例中做这样的事情

$('input').on('ifChecked', function(event){
    $(this).parents('.panel').first().next().find('.panel-heading a').click();
});

更新了小提琴：http://jsfiddle.net/Lq07ysbq/11/

Answer 3

理想情况下，您应该使用插件提供的JS API。在这种情况下，请使用＆＃39;隐藏＆＃39;和＆＃39;显示＆＃39;选项（http://getbootstrap.com/javascript/#collapse）。我在这里更新了你的小提琴：http://jsfiddle.net/catalyst156/Lq07ysbq/13/

$('.item1').on('ifChecked', function(event){
    $(this).parents('.panel-collapse').collapse('hide');
    $('#collapseTwo').collapse('show');
});

在我的头脑中，我无法想出打开下一个面板的一般解决方案，所以现在使用特定的ID。

如何通过单击其中的复选框折叠bootstrap手风琴

3 个答案: