javascript - jQuery:切换一个类并替换为另一个类 - 反之亦然

Question

我想通过添加“显示”类来显示我的模式，如果我的模式具有显示类并且我重新单击，请将其替换为“隐藏”类以将其删除。我需要这个解决方案来添加一些 CSS 动画效果。

请问我该怎么做？示例:我单击触发器类，“显示”类被添加到我的模式中以显示它，如果我重新单击触发器，则删除我的“显示”类并添加“隐藏”。反之亦然。

我的js代码:

(function($)
{
    // MODAL
    $(".modal-trigger").click(function(event)
    {
        event.preventDefault();
        $(".modal").toggleClass("show");
    });
})(jQuery);

谢谢。

Answer 1

只需从 .modal 元素上的一个类开始，然后切换两个类，它们就会交替

$(".modal-trigger").click(function(event) {
    event.preventDefault();
    $(".modal").toggleClass("show hide");
});

FIDDLE