javascript - 如何通过单击其中的复选框折叠引导手风琴

Question

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

我正在使用 jQuery icheck 插件来设置复选框的样式。那么我能做些什么来让手风琴面板倒塌呢？小提琴

$('.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。在这种情况下，请使用“隐藏”和“显示”选项 ( 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。