javascript - 关闭 SlideToggle 时如何更改/删除类

Question

我想在关闭 SlideToggle 时从 liToggle 中删除 ativo 类。我试过使用 is(":hidden") 和 ELSE 语句，但不起作用。

我该怎么做？

$("aside #menu-busca ul > li a").click(function(){
    if($(this).attr('href') == "#"){

        var ulToggle = $(this).parent().children("ul");
        var liToggle = $(this).parent();
        ulToggle.slideToggle("slow");

        if (ulToggle.is(":visible")){
            $(liToggle).addClass("ativo");
        }
        // * Here?
        else {
            $(liToggle).removeClass("ativo");
        }

        return false;
    }
});

我这里也有一个 codepen... 很有用:http://codepen.io/maykelesser/pen/RKdgvY

Answer 1

您必须等到 slideToggle() 动画实际完成才能确定它是否 :visible。

你可以传递一个回调:

var ulToggle = $(this).parent().children("ul");
var liToggle = $(this).parent();

ulToggle.slideToggle("slow", function() {
    if (ulToggle.is(":visible")){
        $(liToggle).addClass("ativo");
    }
    else {
        $(liToggle).removeClass("ativo");
    }
});

return false;

或者使用 Promise :

ulToggle.slideToggle("slow").promise().then(function() {
    if (ulToggle.is(":visible")){
        $(liToggle).addClass("ativo");
    }
    else {
        $(liToggle).removeClass("ativo");
    }
});

此外，您可以使用以下方法避免整个 if 子句:

$(liToggle).toggleClass("ativo", ulToggle.is(":visible"));