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

Answer 2

尝试以下内容（您需要更改选择器以匹配您的html / clases）：

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

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

        if($(this).hasClass("hide")){
             $('.faq-hideable .answer:visible').slideToggle(500);
        }else{
             $('.faq-hideable .answer:hidden').slideToggle(500);
        }
        $('.faq-hideable').closest('li').find('h2').toggleClass('p-open');

    });

Answer 3

我有类似你的开放/关闭系统，我使用if这样的关闭：

$('#expand-close a').click(function () {
        if ($('.faq-hideable').is(':hidden')) {
            $('.faq-hideable').show();                
        }
        else {
        $('.faq-hideable').hide();
        }
    });

希望它可以帮到你

Jquery slideToggle（） - 仅切换某些项目

3 个答案: