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

【问题标题】：My mobile menu Jquery script only runs once我的移动菜单 Jquery 脚本只运行一次
【发布时间】：2016-08-16 00:22:28
【问题描述】：

您好，我是 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;
    }
}

【问题讨论】：

标签： javascript jquery jquery-mobile mobile menu

【解决方案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");
            }

        });
    });

【讨论】：

【解决方案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");
        }
    });
});

【讨论】：

【解决方案3】：

你试过 toggleClass 吗？

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

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

看看this fiddle

要了解有关 .toggleClass() 的更多信息。见jQuery API doc

【讨论】：

谢谢，我会调查的