Question

我正在设计一个响应式网站，可以查看here并使用jQuery slimMenu提供可在特定断点处初始化的可折叠导航菜单。我想在用户点击链接后强制菜单重新崩溃，而我正试图找出最佳方法。我发现this StackOverflow thread通过建议创建一个额外的点击事件来提示菜单关闭来解决类似的问题。

因此，我想我可以将该函数包装在另一个函数中，以检查响应式菜单是否已按如下方式触发：

// collapse slimmenu on click
$(window).resize(function(){    
    if ($(".menu-collapser").css("display") == "block" ){
        $(".nav").on("click", "li", function () {
        $(".collapse-button").click();
        });
    }
});

我的代码中显然存在某种错误，因为它在Firefox中创建了一种时髦的行为，导致折叠/响应式菜单在最终关闭之前折叠并打开几次，或者在Chrome中根本没有关闭。我在这做错了什么？或者是否有一种完全不同的方法强制菜单在点击后关闭，这比这个更好？感谢您的帮助。

Answer 1

$（window）.resize（）非常敏感，因此不建议在$（window）.resize（）中设置事件监听器。因为事件监听器被设置了很多次。

您应该将事件侦听器设置为外部一次，这就是我要这样做的方式，

// collapse slimmenu on click
$(window).resize(function(){    
    if ($(".menu-collapser").css("display") == "block" ){
        $(".nav").addClass("mobile");
    } else {
        $(".nav").removeClass("mobile")
    }
}).resize();

$("body").on("click", ".mobile li", function () {
  $(".collapse-button").click();
});

已更新：抱歉，我与您分享了错误的代码，如果您设置$（“。mobile”）。on（）实际上没有设置，因为移动设备上没有任何元素初始时上课。

因此，您应该处理可以解决问题的正文on(".mobile li")。

还有一件事，不要忘记在document.ready上触发调整大小。如果有人在手机中打开你的网站，移动类将永远不会被设置，因为启动时没有调整大小事件。

Answer 2

看来你的问题很容易解决。因为菜单点击后您的菜单已折叠，您无需检查任何内容。它是.nav元素的li的简单绑定事件。

$(".nav li").on("click", function(){
        $(".collapse-button").click();
    }
});

这当然是假设你是click（）函数关闭

点击关闭手机菜单？

2 个答案: