Question

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

的三个主要功能（见下文）前两个功能很好，因为按钮切换改变了它的类（到X）＆＃34;活动＆＃34;这使它成为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（启动时菜单设置为完全崩溃，未在演示文件中打开）

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

Answer 1

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

<强> event.target

发起事件的DOM元素。

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

<强> Updated Fiddle

Answer 2

以下是修改后的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');
    });
});

这是分叉工作的jsfiddle： http://jsfiddle.net/ytnLyqrv/1/

使用JQuery打开关闭菜单

2 个答案: