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);

如何检查JQuery幻灯片切换的状态？

1 个答案: