使用 JQuery 打开关闭菜单答案

【问题标题】：Using JQuery to open close menu使用 JQuery 打开关闭菜单
【发布时间】：2015-08-14 19:59:48
【问题描述】：

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

三个主要功能（见下文）中，前两个运行良好，因为按钮切换将其类（变为 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（菜单设置为在启动时完全折叠而不像演示中那样打开）

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

【问题讨论】：

标签： javascript jquery html css

【解决方案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

【讨论】：

这似乎工作......！请原谅我的不相信，即使我自己的眼睛也一直在努力解决这些天，所以非常感谢！
这很奇怪但是现在菜单css样式没有直接出现因为代码？有什么想法吗？
我没有得到你。你能详细说明一下吗？
我认为这是因为 multipushmenu(init) 的功能可能需要到位，该功能仍然有效，但菜单只是样式文本而不是框等
你能告诉我在小提琴中重现它的步骤吗？样式看起来不错。

【解决方案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/

【讨论】：