javascript - 使用 JQuery 打开关闭菜单

Question

好的，所以我有这个控制菜单打开/关闭的脚本....

在三个主要功能中(见下文)，前两个效果很好，因为按钮切换将其类(变为 X)“激活”，使其成为 X。

然而，第四个(注释掉的)功能不起作用...它的设计目的是当您在菜单打开时单击正文或菜单以外的任何地方时，它将关闭。请有人帮我重写最后一个函数，让它工作。

$(document).ready(function () {
    var $navToggle = $('.nav-toggle');
    $(".navbtn").click(function () {
        if($navToggle.hasClass('active')){
            $('#menu').multilevelpushmenu('collapse');
            $navToggle.removeClass('active');
            $(this).addClass('active');
        }
        else{
            $('#menu').multilevelpushmenu('expand');
            $navToggle.addClass('active');
            $(this).removeClass('active');
        }
    });
$(".navbtn").hover(function () {
    $('.nav-toggle').addClass('hover');
},function(){
    $('.nav-toggle').removeClass('hover');
});


/*$('body').on('click', function(e){
 if( !$(this).closest('#menu, .navbtn, .nav-toggle').length) {
    $('#menu').multilevelpushmenu('collapse');
    $navToggle.removeClass('active');
        e.stopPropagation();        
    }; 
});*/
});

我在下面提供了一个 JSFiddle(菜单设置为启动时完全折叠，而不是像演示中那样打开 fyi)

http://jsfiddle.net/greggy_coding/ppX53/66/

Answer 1

使用 e.target 而不是 this，因为 this 指的是 body 而不是当前点击的元素。

---

event.target

The DOM element that initiated the event.

---

$('body').on('click', function (e) {
    if (!$(e.target).closest('#menu, .navbtn, .nav-toggle').length) {
        $('#menu').multilevelpushmenu('collapse');
        $navToggle.removeClass('active');
        e.stopPropagation();
    };
});

Updated Fiddle