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

Question

我有一个Bootstrap手风琴，每个手风琴面板里都有一个复选框。当我勾选面板内的复选框时，它的父面板应该折叠起来，下一个面板应该打开。

我正在使用jQuery icheck插件来美化复选框。那么我该怎么做才能使手风琴面板折叠呢？FIDDLE

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

});

- Raihan

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");
});

这是第一个jsfiddle链接：http://jsfiddle.net/sap1ruq2/1/

这是更新后的jsfiddle链接：http://jsfiddle.net/bstjmdLp/

如果这是您需要的，请告诉我！

- Theo Orphanos

---

你是正确的。但是根据Bootstrap文档中给出的事件，是否可以实现折叠（Collapse）功能？ shown.bs.collapse
hidden.bs.collapsehttp://getbootstrap.com/javascript/#collapse - Raihan

@Raihan 我创建了一个新的fiddle。希望这是你在寻找的内容：http://jsfiddle.net/bstjmdLp/ - Theo Orphanos

Answer 2

您在这种情况下可以做如下的事情。

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

更新了一个示例：http://jsfiddle.net/Lq07ysbq/11/

- ZarX

---

实际上，您的解决方案非常标准。 - Raihan

Answer 3

理想情况下，您应该使用插件提供的JS API。在这种情况下，使用“hide”和“show”选项（http://getbootstrap.com/javascript/#collapse）。我已经更新了您的fiddle，链接如下：http://jsfiddle.net/catalyst156/Lq07ysbq/13/。

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

就我个人而言，我无法想出一个通用的解决方案来打开下一个面板，因此现在只能使用特定的id。

- catalyst156