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

当窗口宽度低于768px时，我为单页网站制作了响应式菜单，切换到可切换菜单。基本上我想通过点击标题来切换菜单，并通过另一次点击菜单链接关闭菜单（li -element）。Toggle menu onclick，close by menu link - but only in mobile view

我的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时，我也发现菜单消失了。

很遗憾菜单不仅在单击菜单链接时在移动视图中消失，而且在正常视图（> 768像素）中也不会消失。

我试过与if($(window).width() < 768px)一起工作，但并不是说跨浏览器很开心。

我也试着用if($('#pull').is(':visible'))来解决这个问题，因为#pull只能在移动视图中看到，但是它也不能正常工作。

来源

2015-10-13 sourg

为什么要用'$（“＃头UL”）隐藏（）;'？当点击一个'li'时，这行隐藏'ul'。 – Alex

因为我希望菜单在单击'li'元素时关闭。这就是我的意思是“菜单项”。我编辑它，所以它更好理解。 – sourg

我一直在试图用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(); 
    } 
});

我没有看到你的问题可能会使用这种方法，但是这应该只是罚款

来源

2015-10-14 07:05:33 Simplicity

谢谢！你是完全正确的，它的工作很棒！我不知道我的尝试出了什么问题。 – sourg

没问题，不要忘了slideToggle（）使它看起来更好一些，当然，这是你自己的看法，但我认为实际上任何人都会喜欢滑过“poof I'm gone”方法@ sourg – Simplicity

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

回答

相关问题