切换菜单onclick，单击菜单链接关闭 – 但仅限于移动视图

当窗口宽度低于768px时，我为单页网站制作了响应式菜单，切换到可切换菜单。 基本上我希望通过单击标题来切换菜单，然后通过再次单击菜单链接（ li -element）来关闭菜单。

到目前为止我的jQuery代码：

 jQuery(document).ready(function() { var e = $("#pull"); menu = $("#header ul"), $(e).on("click", function(e) { e.preventDefault(), menu.slideToggle() }), $(window).resize(function() { menu.is(":hidden") && menu.removeAttr("style") }) }); $("#header ul").on("click", "li", function () { $("#header ul").hide(); }); 

还有一个演示的jsfiddle： http ： //jsfiddle.net/ansoqvms/2/

因此，单击标题时打开和关闭菜单工作正常。 当点击菜单li -element时，菜单也会消失。

遗憾的是 ，当单击菜单链接时，菜单不仅会在移动视图中消失，而且还会在普通视图中（> 768px）消失。

我尝试使用if($(window).width() < 768px) ，但这不是跨浏览器的快乐。

我也尝试使用if($('#pull').is(':visible')) ，因为#pull仅在移动视图中可见，但它也没有用。

Answer 1

我一直试图用if($('#pull').is(':visible'))来重现你的问题，但对我来说，以下工作正常。

 jQuery(document).ready(function() { var e = $("#pull"); menu = $("#header ul"), $(e).on("click", function(e) { e.preventDefault(), menu.slideToggle() }), $(window).resize(function() { menu.is(":hidden") && menu.removeAttr("style") }) }); $("#header ul").on("click", "li", function () { if($("#pull").is(":visible")) { //Use slideToggle() here for a better look and feel of the menu $("#header ul").slideToggle(); } }); 

我没有看到你的问题可能与这个方法在哪里，但这应该工作得很好