Javascript 使用JQuery打开关闭菜单

好的，我有一个控制菜单打开/关闭的脚本

在三个主要功能（如下所示）中，前两个功能运行良好，因为按钮切换将其类别（变为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();        
    }; 
});*/
});

我在下面提供了一个JSFIDLE（菜单设置为启动时完全关闭，而不是像演示中那样打开）

---

使用

e.target

而不是

this

，因为

this

指的是主体而不是当前单击的元素

---

启动事件的DOM元素

---

---

以下是经过修改的javascript：

$(document).ready(function(){
    $('#menu').multilevelpushmenu();
});


$(document).ready(function () {
    var $navToggle = $('.nav-toggle');
    $(".navbtn").click(function (e) {
        e.stopPropagation();
        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');
    });

    $('#menu').on('click', function(e) {
         e.stopPropagation();
    });


    $('body').on('click', function(e){
        $('#menu').multilevelpushmenu('collapse');
        $navToggle.removeClass('active');
    });
});

以下是分叉工作的JSFIDLE：

---

这似乎有效！请原谅我的怀疑，即使是用我自己的眼睛，我已经努力解决了好几天了，所以非常感谢！这是非常奇怪的，但现在菜单css样式没有直接出现，因为代码？有什么想法吗？我不明白你的意思。你能详细说明一下吗？我想这是因为multipushmenu（init）的功能需要到位，也许这个功能仍然可以工作，但菜单只是样式化的文本，没有框等等。你能告诉我在小提琴中复制它的步骤吗？造型看起来不错。

$(document).ready(function(){
    $('#menu').multilevelpushmenu();
});


$(document).ready(function () {
    var $navToggle = $('.nav-toggle');
    $(".navbtn").click(function (e) {
        e.stopPropagation();
        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');
    });

    $('#menu').on('click', function(e) {
         e.stopPropagation();
    });


    $('body').on('click', function(e){
        $('#menu').multilevelpushmenu('collapse');
        $navToggle.removeClass('active');
    });
});