响应式导航 - 如何在浏览器最小化时打开/关闭导航

Question

我正在制作自己的响应式导航：http://www.hongkiat.com/blog/responsive-web-nav/

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

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

这个功能怎么加？

这是脚本：

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