Question

我已达到手风琴同时打开的程度 - 请参阅http://www.bootply.com/Go4t29rYyF

当你点击“tab1”时，所有“tab1s”都会打开，当你点击“tab2”时，所有的“tab2s”都会打开 - 太棒了！但我不能同时打开“tab1s＆amp; 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

您可能希望使用事件参数

指定要在函数中影响的元素

示例：

   $('.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', '');
        }
    });

这是一个例子。 您可能需要更改此代码才能使其适用于您的情况

Bootstrap崩溃 - 同时打开多个手风琴

2 个答案: