javascript - 如何点击外部关闭这个滑入式菜单？

Question

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

现在我试图在单击菜单以外的任何地方时将其关闭。我尝试了一些已经找到的建议，但由于某种原因我无法让它发挥作用。

提前致谢!

    $(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');
    });
});

Answer 1

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

然后，当单击 $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