Question

我有一个简单的切换功能来显示和隐藏内容。它在点击H2时触发，并添加了“全部显示”/“全部隐藏”功能。

我遇到的问题是，当您展开几个内容区域时，然后单击“全部显示”它会隐藏打开的内容并显示隐藏的内容而不是仅显示隐藏的内容区域。我知道它由“.toggle”函数触发并切换打开的函数关闭。从理论上讲，我怀疑我必须在扩展的类中添加一个类并运行检查以确定是否有任何打开并且不切换它们，只扩展隐藏的类。要使用“全部关闭”按钮关闭，我必须做反向操作吗？

我该如何解决这个问题？ example is here

Answer 1

简单：不要将“toggle()”用于show-all按钮，而是使用“show()”。同样隐藏所有内容，请使用“hide()"。

仅针对单击

使用toggle()

Answer 2

因为toggle只会切换元素的状态（显示/隐藏）。在这种情况下，请勿使用slideToggle，而是有条件地使用slideUp/slideDown。试试这个。

$(".toggleAll").click(function() {
    if($(this).text() == 'Show All'){
        $(".faq p").slideDown("slow");
        $(this).text('Hide All');
        $(".faq h2").addClass('active');
    }
    else{
        $(".faq p").slideUp("slow");
        $(this).text('Show All');
        $(".faq h2").removeClass('active');
    }
});

<强> Demo

切换功能无法正常工作

2 个答案: