Bootstrap崩潰 - 同時打開多個手風琴

Question

我已達到手風琴同時打開的程度 - 請參閱http://www.bootply.com/Go4t29rYyF

當你點擊“tab1”時，所有的“tab1s”都會打開，當你點擊“tab2”時，所有的“tab2s”都會打開 - 太棒了！ 但是我不能同時打開“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');
    });
});

Answer 2

您可能希望使用event參數指定要在函數中影響的元素

例：

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

這是一個例子。 您可能需要更改此代碼才能在您的情況下工作