响应式导航 – 当浏览器最小化时如何使导航打开/关闭

我正在从这个啧啧做自己的响应式导航： http ： //www.hongkiat.com/blog/responsive-web-nav/

这是我的小提琴： http ： //jsfiddle.net/2Pqch/

当窗口最小化并按下打开/关闭btn时，我希望能够通过单击按钮或单击导航外部来关闭它。

如何添加此function？

这是脚本：

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

Answer 1

你可以这样做：

http://jsfiddle.net/2Pqch/1/

我添加了e.stopPropagation(); 阻止事件冒泡并添加

  $(document).on('click',function(e){ if(!menu.is(":hidden")){ menu.slideToggle(); } }); 

它会检查菜单是否隐藏，如果没有隐藏，单击document将再次关闭菜单。 更好的方法可能是定位内容容器以提示关闭，因为单击document上的任何位置都会关闭它。

Answer 2

检测是否单击导航或窗口，如果单击导航，则切换导航。
否则，如果打开导航并单击窗口，则切换导航。

演示 http://jsfiddle.net/2Pqch/2/

 var clickedOnMenu = false; $(pull).on('click', function(e) { e.preventDefault(); clickedOnMenu = true; }); $(window).on('click', function(e) { if(clickedOnMenu) { menu.slideToggle(); clickedOnMenu = false; } else if ((menu).is(":visible")) { menu.slideToggle(); } });