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

问题描述

我正在制作自己的响应导航：

I am making my own responsive navigation from this tut: http://www.hongkiat.com/blog/responsive-web-nav/

这是我的小提琴：

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

When window is minimized and you press the open/close btn I would like to be able to close it either by clicking the button or by clicking outside the nav.

如何添加此功能？

这是脚本：

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

推荐答案

检测是否点击导航或窗口，如果单击导航，切换导航。
如果导航打开&单击Window，切换导航。

Detect if it's clicked on Nav or on Window, if clicked on Nav, Toggle the Nav.
Else if Nav is opened & clicked on Window, Toggle the Nav.

      演示

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

这篇关于响应式导航 - 当浏览器最小化时如何使导航打开/关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！