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

Posted 2023-05-09

【中文标题】我的移动菜单 Jquery 脚本只运行一次

【英文标题】：My mobile menu Jquery script only runs once

【发布时间】：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;
    

【参考方案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

【讨论】：

谢谢，我会调查的