Question

当窗口宽度低于768px时，我为单页网站制作了响应式菜单，切换到可切换菜单。基本上我希望通过单击标题来切换菜单，然后通过再次单击菜单链接（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/

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

可悲菜单不仅在单击菜单链接时在移动视图中消失，而且在普通视图中也会消失（＆gt; 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，单击菜单链接关闭 - 但仅限于移动视图

1 个答案: