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

我已经手风琴同时打开了-请参阅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', '');
            }
        });
    });

解决方法:

我整理了代码,改为使用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');
    });
});

标签：twitter-bootstrap,twitter-bootstrap-3,javascript,jquery
来源： https://codeday.me/bug/20191028/1950797.html