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

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