如何在外面点击这个滑入式菜单？

I'm currently trying things with jQuery for a mobile website. I implemented a very simple slide-in menu I found here: http://jsfiddle.net/jm36a13s/

我正在尝试使用jQuery进行移动网站。我实现了一个非常简单的滑入菜单,我在这里找到:http://jsfiddle.net/jm36a13s/

Now I'm trying to get it to close when clicking anywhere but the menu. I tried a few suggestions I found already but for some reason I can't get it to work.

现在我想点击菜单上的任何地方关闭它。我尝试了一些我已经发现的建议,但出于某种原因,我无法让它发挥作用。

Thanks in advance!

提前致谢!

    $(document).ready(function() {
    $menuLeft = $('.pushmenu-left');
    $nav_list = $('#nav_list');

    $nav_list.click(function() {
        $(this).toggleClass('active');
        $('.pushmenu-push').toggleClass('pushmenu-push-toright');
        $menuLeft.toggleClass('pushmenu-open');
    });
});

2 个解决方案

#1

You can remove your classes when the user clicks anywhere in the window.

当用户单击窗口中的任意位置时,您可以删除类。

Then you can stop the event bubbling up the DOM tree when either $pushMenu or $nav_list is clicked, to prevent the above:

然后,当单击$ pushMenu或$ nav_list时,您可以停止事件冒泡DOM树,以防止上述情况:

$(document).ready(function () {
    var $menuLeft = $('.pushmenu-left'),
        $nav_list = $('#nav_list'),
        $pushMenu = $('.pushmenu-push');

    $nav_list.click(function () {
        $(this).toggleClass('active');
        $pushMenu.toggleClass('pushmenu-push-toright');
        $menuLeft.toggleClass('pushmenu-open');
    }).add($menuLeft).click(function (e) {
        e.stopPropagation();
    });

    $(window).click(function () {
        $nav_list.removeClass('active');
        $pushMenu.removeClass('pushmenu-push-toright');
        $menuLeft.removeClass('pushmenu-open');
    });
});

JSFiddle

#2

You may also try the following. The whole idea is to register a click event on the entire document and hide the menu if the target_id is not "nav_list"

您也可以尝试以下方法。整个想法是在整个文档上注册一个click事件,如果target_id不是“nav_list”,则隐藏菜单

$(document).click(function(e)
        {   
           if(e.target.id != "nav_list")
           {
             $nav_list.removeClass('active');
             $pushMenu.removeClass('pushmenu-push-toright');
             $menuLeft.removeClass('pushmenu-open');
           }
        });

http://jsfiddle.net/jm36a13s/23/

#1