切换菜单 onclick，通过单击菜单 link 关闭 - 但仅在移动视图中

Question

我为单页网站制作了一个响应式菜单，当 window 宽度低于 768 像素时，该菜单会切换到可切换菜单。基本上，我希望通过单击 header 来切换菜单，并通过再次单击菜单 link （li-元素）来关闭菜单。

到目前为止我的 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/

因此在单击 header 时打开和关闭菜单效果很好。单击菜单 li-element.

时，我还发现菜单消失了

遗憾的是菜单不仅在移动视图中消失，当菜单 link 被点击时，在普通视图（> 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();
    }
});

我看不出你的问题出在哪里，但这个方法应该没问题

切换菜单 onclick，通过单击菜单 link 关闭 - 但仅在移动视图中

Toggle menu onclick, close by clicking menu link - but only in mobile view

html

css

jquery

toggle

responsive-design