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

Question

我正在通过这个教程制作自己的响应式导航:http://www.hongkiat.com/blog/responsive-web-nav/

这是我的 fiddle :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');
                }
            });
        });

Answer 1

你可以这样做:

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

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

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

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