如何检查 JQuery 滑动切换的状态？

Question

因此，我有一个手风琴菜单来显示结果，并在顶部有一个“显示全部”按钮，这样用户就不必单击每个菜单来展开它。当他们单击“显示全部”时，所有内容都会展开，并且按钮的文本会切换为“隐藏全部”。

但是，我想确保，如果用户决定自己手动关闭所有部分，则按钮将再次从“隐藏全部”切换到“显示全部”。

我也希望这能以另一种方式工作，以防万一他们打开所有这些（或者可能是任意数量的）。如果我能按下按钮说“隐藏全部”，那就太好了。

有道理吗？它应该相对简单......我只是 JQuery 的新手，我不知道如何检查切换的状态。这是我必须展开所有部分的代码。

    function expandAll() {
        if(document.getElementById("displayMajors").innerHTML == "Show All") {
            $('.accordionContent').slideDown('normal');
            document.getElementById("displayMajors").innerHTML = "Hide All";
        }
        else { 
            $('.accordionContent').slideUp('normal');
            document.getElementById("displayMajors").innerHTML = "Show All";
        }
     }

“displayMajors”是按钮的 ID，“accordionContent”是 div 类。

Answer 1

添加测试函数

function test_accordion() {
    var elems = $('.accordionContent');
    if (elems.filter(':visible').length == 0) // all hidden
        $("#displayMajors").html("Show All");
    else if (elems.filter(':hidden').length == 0) // all visible
        $("#displayMajors").html("Hide All");
}

每当向上（或向下）滑动元素时，请添加测试函数作为回调函数。它将在动画完全完成时执行：

$(some_element).slideUp(test_accordion);
$(some_element).slideDown(test_accordion);