我正在做我自己的响应导航从这个图特:http://www.hongkiat.com/blog/responsive-web-nav/
这是我的小提琴:http://jsfiddle.net/2Pqch/
当窗口最小化并按下打开/关闭btn时,我希望可以通过单击按钮或在导航外单击来关闭它。
如何添加此功能?
这是剧本:
$(function() {
var pull = $('.btn');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
最佳答案
你可以这样做:
http://jsfiddle.net/2Pqch/1/
我添加了e.stopPropagation();
以阻止事件冒泡,还添加了
$(document).on('click',function(e){
if(!menu.is(":hidden")){
menu.slideToggle();
}
});
它检查菜单是否隐藏,如果没有隐藏,单击
document
将再次关闭菜单。一个更好的方法可能是以内容容器为目标来提示关闭,因为单击document
上的任何位置都将关闭它。