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

Answer 2

您也可以尝试以下操作。整个想法是在整个文档上注册点击事件，如果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/

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

2 个答案: