Question

我正在尝试编写一个bootstraps手风琴的链接，它会在点击时显示所有的手风琴面板，然后再次点击时所有的面板都会隐藏。

我有大约90％的工作，除了顶部面板表现得很奇怪。当我第一次点击节目时它会隐藏而另一个菜单打开。当来回切换时，虽然它开始按预期工作。

我的jQuery看起来像这样

$('#accShow').on('click', function() {
    if($(this).text() == 'View All') {
        $(this).text('Hide All');
        $('.collapse').collapse('hide');
    } else {
        $(this).text('View All');
        $('.collapse').collapse('show');
    }
    return false;
});

我试过添加它，但它没有效果：

$('#collapseOne').collapse("show");

Answer 1

采取并修改from this answer：

$('#accShow').on('click', function() {
    if($(this).text() == 'View All') {
        $('.collapse:not(.in)').each(function (index) {
            $(this).collapse("toggle");
        });
        $(this).text('Hide All');
    } else {
        $(this).text('View All');
        $('.collapse.in').each(function (index) {
            $(this).collapse("toggle");
        });
    }
    return false;
});

Answer 2

为您的按钮添加ID查看全部和添加脚本：

jQuery(document).ready(function () {
    jQuery('#idButtonViewAll').on('click', function(e){
         jQuery('.accordion-body').each(function(){
               jquery(this).addClass("in");
         });
    });
});

显示所有bootstrap手风琴

2 个答案: