Jquery SlideToggle() - 只切换某些项目

Question

我有一个页面，其中有一些问题，答案隐藏在问题下面。当有人点击问题时，答案就会向下滑动(这是一个单独的功能，效果很好)。再次单击时，它将返回到隐藏状态。

我遇到的问题是一个单独的链接#expand-close a，单击该链接时，将打开/关闭问题的所有答案。

当答案已经打开时，此函数将运行并打开所有已关闭的答案，但会关闭所有打开的答案。

我希望它打开所有并保持打开的答案打开，并关闭所有并保持关闭的答案关闭。

$('#expand-close a').click(function () {

        $(this).toggleClass("hide");

        $('.faq-hideable').slideToggle(500);
        $('.faq-hideable').closest('li').find('h2').toggleClass('p-open');

    });

Answer 1

对于添加/删除类，这很简单，因为 toggleClass()有一个可选的 switch 参数，用于确定是否应添加或删除该类(而不是简单地切换它)。

.slideToggle() 没有这样的工具，因此我们使用基本的 if/else 子句手动执行此操作，以在 slideUp() 或 slideDown 之间进行选择()。

$('#expand-close a').click(function () {
    var tohide = $(this).toggleClass("hide").hasClass("hide");

    if (tohide) {
        $('.faq-hideable').slideUp(500);
    } else {
        $('.faq-hideable').slideDown(500);
    }
    $('.faq-hideable').closest('li').find('h2').toggleClass('p-open', !tohide);

});

<小时/>

如果您想要更简洁的内容(但可读性较差):

$('#expand-close a').click(function () {
    var tohide = $(this).toggleClass("hide").hasClass("hide");
    $('.faq-hideable')[tohide ? "slideUp" : "slideDown"](500)
        .closest('li').find('h2').toggleClass('p-open', !tohide);
});