切换菜单onclick，关闭通过点击菜单链接 - 但只能在移动视图 [英] Toggle menu onclick, close by clicking menu link - but only in mobile view

问题描述

当窗口宽度低于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

菜单会消失。很遗憾， / strong>菜单不仅在移动视图中消失，而且在正常视图（> 768px）中也可以在菜单链接中消失。

我尝试使用 if（$（window）.width（）<768px），但这并不是说跨浏览器开心。

我也尝试用 if（$（'＃pull'）。is（'：visible'））解决问题，因为#pull只在移动视图中可见，但它没有我一直试图用来重新创建你的问题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））{ 
 //使用slideToggle（）来获得更好的菜单效果
 $（＃header ul）。slideToggle（）; 
} 
}）; 
  

我没有看到您的问题可能出现在这个方法中，但这应该很好

I've made a responsive menu for a one page website that switches to a toggleable menu, when the window width is lower than 768px. Basically I want the menu to be toggled by a click on the header and closed by another click on a menu link (li-element).

My jQuery code so far:

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();
});

And a jsfiddle for demonstration: http://jsfiddle.net/ansoqvms/2/

So opening and closing the menu when clicking on the header works fine. I also got it working that the menu disappears when clicking a menu li-element.

Sadly the menu not only disappears in mobile view when a menu link is clicked, but also in normal view (> 768px).

I tried working with if($(window).width() < 768px), but it's not that cross browser happy.

I also tried solving the problem with if($('#pull').is(':visible')), since #pull is only visible in mobile view, but it didn't work out as well.

解决方案

I've been trying to recreate your problems with if($('#pull').is(':visible')) but for me the following works just fine.

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();
    }
});

I don't see where your problem might be with this method but this should work just fine

这篇关于切换菜单onclick，关闭通过点击菜单链接 - 但只能在移动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！