点击关闭手机菜单？

我在设计一个响应式网站，可以查看here并使用jQuery slimMenu提供可在特定中断点初始化的可折叠导航菜单。我想强制菜单在用户点击一个链接后重新崩溃，我试图找出最好的方法来做到这一点。我发现this StackOverflow thread通过建议创建一个附加的单击事件来提示菜单关闭来解决类似的问题。点击关闭手机菜单？

因此，我想我可以换一个检查，看看是否响应菜单已被触发如下的另一个功能：

// collapse slimmenu on click 
$(window).resize(function(){  
    if ($(".menu-collapser").css("display") == "block"){ 
     $(".nav").on("click", "li", function() { 
     $(".collapse-button").click(); 
     }); 
    } 
});

很明显我的代码中某种错误的，因为它是创造时髦在Firefox中导致折叠/响应菜单崩溃并在最终关闭之前打开好几次，或者根本没有在Chrome中关闭。我在这里做错了什么？还是有一种完全不同的方法来强制菜单关闭后点击，这将是优于这一个？感谢您的帮助。

来源

2014-02-26 nickpish

$（窗口）.resize（）真的是敏感的，所以设置在$（窗口）.resize事件侦听器（）是不可取的。因为事件监听器被设置很多次。

你应该之外设置的事件侦听一次，这是我会怎么做，

// collapse slimmenu on click 
$(window).resize(function(){  
    if ($(".menu-collapser").css("display") == "block"){ 
     $(".nav").addClass("mobile"); 
    } else { 
     $(".nav").removeClass("mobile") 
    } 
}).resize(); 

$("body").on("click", ".mobile li", function() { 
    $(".collapse-button").click(); 
});

更新时间：对不起，我分享了错误的代码与你，如果你设置$（”移动。 “）.on（）实际上没有设置，因为在init时没有任何移动类的元素。

所以你应该处理身体点击on(".mobile li")这将解决问题。

还有一件事，不要忘记在document.ready上触发调整大小，如果有人在手机中打开您的网站，移动类将永远不会被设置，因为启动时没有调整大小事件。

来源

2014-02-26 22:31:02 ocanal

感谢您的回复;我正在尝试你的方法，因为某些原因，它似乎没有工作。我可以在Firebug中看到正在添加“移动”类，但点击功能似乎没有效果。我想知道我的util.js文件中是否存在其他问题？（我用你的代码更新了我的网站，所以可以看到。） – nickpish

嗨ocanal我正在意识到其他解决方案存在问题，我试图实现你的，但它仍然给我提出问题。我希望你能看看我上面更新的链接，看看有什么可能导致这个问题？谢谢！ – nickpish

我已经更新了我的答案。 – ocanal

看来你的问题很容易解决。因为菜单点击后你的菜单被折叠了，你不需要检查任何东西。它对.nav元素的li是一个简单的绑定事件。

$(".nav li").on("click", function(){ 
     $(".collapse-button").click(); 
    } 
});

当然，这是假设你点击（）函数密切

来源

2014-02-26 22:25:20 mrpanda

这个伎俩！谢谢！ – nickpish

点击关闭手机菜单？

回答

相关问题