bootstrap.js手风琴折叠/展开

Question

我正在尝试在每个手风琴琴身上创建上一个/下一个按钮.

我无法找到折叠/扩展某个部分的方法.我尝试in从中删除该类,accordion-body但似乎没有崩溃.

        $(".accordion-body").each(function(){
            if($(this).hasClass("in")) {
                $(this).removeClass("in");
            }
        });

无论何时或任何我使用该.collapse方法,我得到一个javascript错误说该对象没有方法崩溃.

Answer 1

本in类只是一个指标,一个部分是开放的.Javascript模块应用相同的内联样式.in,因此删除类是不够的.

您需要使用模块的API以编程方式与手风琴进行交互,.collapse()方法如下:

$('.accordion-body').each(function(){
    if ($(this).hasClass('in')) {
        $(this).collapse('toggle');
    }
});

或者,您可以将其浓缩为:

$('.accordion-body.in').collapse('toggle');

如果您只想折叠任何打开的部分:

$('.accordion-body').collapse('hide');

如果您只想扩展任何封闭的部分:

$('.accordion-body').collapse('show');

Answer 2

这是另一个解决方案：

/**
 * Make an accordion active
 * @param {String} id ID of the accordion
 */
var activateAccordion = function (id) {
    // Get the parents
    var parents = $('a[href="#' + id + '"]').parents('.panel-group').children('.panel');

    // Go through each of the parents
    $.each(parents, function (idx, obj) {
        // Check if the child exists
        var find = $(obj).find('a[href="#' + id + '"]'),
            children = $(obj).children('.panel-collapse');

        if (find.length > 0) {
            // Show the selected child
            children.removeClass('collapse');
            children.addClass('in');
        } else {
            // Hide the others
            children.removeClass('in');
            children.addClass('collapse');
        }
    });
};

代码的重要部分是组合，记住.collapse类，而不仅仅是使用.in：

// Show the selected child
children.removeClass('collapse');
children.addClass('in');

和

// Hide the others
children.removeClass('in');
children.addClass('collapse');

上面的例子已经在Twitter的Bootstrap v3.3.4中测试过