javascript - Bootstrap collapse - 同时打开多个 Accordion

Question

我已经到了我的 Accordion 同时打开的地步 - 请参阅 http://www.bootply.com/Go4t29rYyF

当您单击“tab1”时，所有“tab1”都会打开，当您单击“tab2”时，所有“tab2”都会打开 - 太棒了!但我无法同时打开“tab1s 和 tab2s”，它仅在我先关闭其中一个选项卡然后再打开另一个选项卡时才有效。问题出在我的 js 上，但无法解决。

$(function () {

        var $active = true;

        $('.panel-title > a').click(function (e) {
            e.preventDefault();
        });

        $('.number1-collapse').on('click', function () {
            if (!$active) {
                $active = true;
                $('.panel-title > a').attr('data-toggle', 'collapse');
                $('.number1').collapse('hide');
            } else {
                $active = false;
                $('.number1').collapse('show');
                $('.panel-title > a').attr('data-toggle', '');
            }
        });


        $('.number2-collapse').on('click', function () {
            if (!$active) {
                $active = true;
                $('.panel-title > a').attr('data-toggle', 'collapse');
                $('.number2').collapse('hide');
            } else {
                $active = false;
                $('.number2').collapse('show');
                $('.panel-title > a').attr('data-toggle', '');
            }
        });
    });

Answer 1

我整理了您的代码并更改为使用 toggle 方法，而不是使用各种标志。问题是您在它们之间共享事件标志。这是改进后的代码和 Bootply :

$(function () {
    $('.panel-title > a').click(function (e) {
        e.preventDefault();
    });

    $('.number1-collapse').on('click', function () {
        $('.number1').collapse('toggle');
    });

    $('.number2-collapse').on('click', function () {
        $('.number2').collapse('toggle');
    });
});