Question

我的expand all / collapse all功能有点小问题。

这是我的jsfiddel链接：

让我们说扩展Name1和Name2，然后点击全部展开按钮，它的作用是扩展所有内容，但会折叠Name1和Name2。

我是否在javascrit函数中指定了css id？

$(function () {
    $(document).on('click', '.expandcollapse', function(e) {
        $('.collapse').each(function(index) {
            $(this).collapse("toggle");
        });

        if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All") {
            $(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
        }
        else {
            $(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
        } 
    });
});

Answer 1

您需要根据按钮的当前状态执行特定操作。一种方法是在按钮处于给定状态时为其分配特定的类。

注意：由于群组管理已经到位，当您使用展开/全部折叠按钮和各个控件的组合时，状态似乎变得混乱。< / p>

$(document).on('click', '.expandcollapse', function (e) {
    // Perform specific action based on current state
    if ($(this).hasClass('collapseAll')) {
        $('.collapse').collapse('hide');
        $(this).removeClass('collapseAll').html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
    } else {
        $('.collapse').collapse('show');
        $(this).addClass('collapseAll').html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
    }
});

<强> DEMO

要关闭群组管理并查看在这种情况下如何正常运作，您可以删除所有项目上的data-parent='#programs-accordion'或将以下内容放在Javascript顶部：

$('.collapse').collapse({
    toggle: false
});

DEMO - 没有小组管理

展开全部并折叠全部在所有情况下都不起作用

1 个答案: