close side menu when clicked outside

问题

this is my code for a menu that comes in from the right side... heres is the 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);
    });
});

i want it to close automatically when clicked outside anywhere out side the menu. how can i do this.

回答1:

Simply do as follow:

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

That's it
Enjoy coding :)

回答2:

Hope this helps you.

$('body').click(function() {
   //add your code here to hide the menu
});

来源：https://stackoverflow.com/questions/42801614/close-side-menu-when-clicked-outside