Question

我的网站内有一个小点击功能

$("#item").click(function() {
    $(".menu").addClass("active");
    $(".footer").removeClass("status");
});

现在当用户点击#item时 - 一切正常，但现在我希望能够在用户再次点击它时反转它，如下所示：

$(".menu").removeClass("active");
$(".footer").addClass("status");

用户可以根据自己的喜好点击。这怎么可能？我在第一次点击（）中尝试了另一次点击（）但是它只能工作一次。

Answer 1

$("#item").click(function() {
    if(!$(".menu").hasClass("active")){
        $(".menu").addClass("active");
        $(".footer").removeClass("status");
    }else{
        $(".menu").removeClass("active");
        $(".footer").addClass("status");
    }
});

Answer 2

您可以使用toggleClass。

价：

在集合中的每个元素中添加或删除一个或多个类匹配的元素，取决于类的存在或 switch参数的值。

代码：

$("#item").click(function() {
    $(".menu").toggleClass("active");
    $(".footer").toggleClass("status");
});

Answer 3

此代码可能有效

$("#item").click(function() {
       $(".menu").toggleClass("active");
       $(".footer").toggleClass("status");
});

但请确保在触发click事件之前应用了正确的类。

Answer 4

$("#item").click(function()
{
    if($(".menu").hasClass("active"))
    {
        $(".menu").removeClass("active");
        $(".footer").addClass("status");
    }
    else
    {
        $(".menu").addClass("active");
        $(".footer").removeClass("status");
    }
});

Answer 5

我会这样做：

$("#item").click(function() {
    var menu = $(".menu")
        , footer = $(".footer");

    if (menu.hasClass("active") && !footer.hasClass("status")) {
        menu.removeClass("active");
        footer.addClass("status");
    }
    else {
        menu.addClass("active");
        footer.removeClass("status");
    }
});

使用单击功能切换

5 个答案: