我的移动菜单 Jquery 脚本只运行一次

Question

嗨，我是 jquery 的新手，我只是想将一个简单的脚本放在一起 show/hide 点击我的移动菜单。它工作正常，但它只能工作一次，直到您刷新浏览器。

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 事件将不起作用，将被最后一个覆盖。您可以通过检查 class 是否存在

来在 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 脚本只运行一次

My mobile menu Jquery script only runs once

javascript

mobile

jquery

menu

jquery-mobile