Question

您好我是jquery的新手，只是尝试将一个简单的脚本放在一起，以便在点击时显示/隐藏我的移动菜单。它工作正常，但它只能运行一次，直到您刷新浏览器。

Jquery的：

$(document).ready(function () {
  //your code here
    $(".nav").addClass("hidenav");
    $(".menutrigger").click(function () {
        $(".nav").removeClass("hidenav").addClass("slidenav");

$(".menutrigger").click(function () {
        $(".nav").removeClass("slidenav").addClass("hidenav");
        });

        });
});

CSS：

@media (max-width: 767px) {
    .slidenav {
        display: block;
    }
    .hidenav {
        display: none;
    }
}

Answer 1

这是因为您正在定义多个点击事件

这应该有效

$(document).ready(function()
    {
        //your code here
        $(".nav").addClass("hidenav");
        var flag = 0;
        $(".menutrigger").click(function()
        {
            if(flag == 0)
            {
                flag = 1;
                $(".nav").removeClass("hidenav").addClass("slidenav");
            }
            else
            {
                flag = 0;
                $(".nav").removeClass("slidenav").addClass("hidenav");
            }

        });
    });

Answer 2

声明多个onClick事件无法正常工作，并将被最后一个覆盖。你可以通过检查你的班级是否存在来完成onclick回调中的所有这些事情

$(document).ready(function () {
  //your code here
    $(".nav").addClass("hidenav");
    $(".menutrigger").click(function () {
        if ($(".nav").hasClass("hidenav")){
           $(".nav").removeClass("hidenav").addClass("slidenav");
        } else if ($(".nav").hasClass("slidenav")){
           $(".nav").removeClass("slidenav").addClass("hidenav");
        }
    });
});

Answer 3

您是否尝试过toggleClass？

$('.menutrigger').click(function (e) {
     $('.demo').toggleClass("hidenav");
});

它会将您的代码压缩到1行。

查看this fiddle

了解有关.toggleClass（）的更多信息。请参阅jQuery API doc

我的手机菜单Jquery脚本只运行一次

3 个答案: