javascript - 在外部单击时关闭侧菜单

Question

这是我从右侧进入的菜单的代码...这是 js

jQuery(document).ready(function($) {
    var $toggleButton = $('.toggle-button'),
        $menuWrap = $('.menu-wrap'),
        $sidebarArrow = $('.sidebar-menu-arrow');
            $content = $('.content');
    // Hamburger button
    $toggleButton.on('click', function() {
        $(this).toggleClass('button-open');
        $menuWrap.toggleClass('menu-show');
        $content.toggleClass('content-background');
    });

    // Sidebar navigation arrows
    $sidebarArrow.click(function() {
        $(this).next().slideToggle(300);
    });
});

我希望它在菜单外任何地方单击时自动关闭。我怎样才能做到这一点。

Answer 1

只需执行以下操作:

       $(document).click(function (e)
        {
            var container = $(".toggle-button");
            if ((!container.is(e.target)))     // if the target of the click isn't the TOGGLE BUTTON... 
            {
                // Code to hide the menu
                $('.toggle-button').toggleClass('button-open');
                $('.menu-wrap').toggleClass('menu-show');
                $('.content').toggleClass('content-background');
            }
        });

就是这样
享受编码的乐趣:)