Question

我一直在处理一个响应式网站，在平板电脑上成为下拉菜单，但我需要在菜单关闭时在文档外部进行点击，（我还需要将鼠标箭头更改为正常形式）我找不到办法，这是我一直在使用的代码：

JQUERY

  $(function() {

    var btn_mobile = $('#nav-mobile'),
        menu = $('#menu').find('ul');

    btn_mobile.on('click', function (e) {
        e.preventDefault();
        e.stopPropagation();


        var el = $(this);

        el.toggleClass('nav-active');
        menu.toggleClass('open-menu');

    })

});

HTML

<nav id="menu"><a class="nav-mobile" id="nav-mobile" href="#">MENU</a>
<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="work.html">Work</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

PARTIAL CSS（平板电脑）

#nav-mobile{
    display: none;
    background: url(../images/menu-icons.svg) no-repeat 42px -2px;
    float: right;
    width:75px;
    height:35px;
    padding-top:9px;
    position: absolute;
    right:0;
    top:0;
    font-weight:bold;

}

#nav-mobile.nav-active{opacity: 1; background: url(../images/menu-icons.svg) no-repeat 42px -48px;}

/* TABLET */
    #nav-mobile{display: block; }
    #menu{margin-top:0px;width: 100%;float: none;padding-top:55px;}
    #menu ul{
    max-height: 0;
    overflow: hidden;
    text-align:center;
    position:relative;
    z-index:500;
    transition: max-height .5s, box-shadow 1.2s, opacity 0.5s;
    opacity:0;
    margin:0 -3.2%;
    }
    #menu li{background:#fff;border-bottom: 1px solid #ececec;float: none;}
    #menu li a{padding: 12px 0;height: auto;width:100%; text-transform:uppercase;}
    #menu li a:hover{background:#fbfbfb;}
    #menu ul.open-menu{max-height: 400px;transition: max-height .5s, box-shadow 1.2s, opacity 0.5s; border-top: 1px solid  #CCC; box-shadow: 0px 9000px 0px 9000px rgba(0,0,0,0.15); opacity:1; }

谢谢你的关注!!!。

Answer 1

在jquery中查看hover(in,out)鼠标光标更改，并使用body :not['#nav..']选择器关闭菜单。

悬停示例：

// Hover script
btn_mobile.hover(
    function () { 
        // {Hover in of the menu} 
        // change the mouse here
    }, 
    function () { // out
        // {Hover out of the menu} 
        // change the mouse here

    }
);

Answer 2

您可以在菜单后面使用透明图层覆盖整个页面（操作css z-index）

在此图层上，您将添加一个单击事件处理程序，该处理程序将隐藏菜单并更改箭头和“display：none;”本身。菜单下拉列表必须在显示时将其“显示：阻止”

看一下bootstrap如何使用其模态处理它：http://getbootstrap.com/javascript/#modals

单击外部菜单以关闭jquery

2 个答案: