close side menu when clicked outside

Question

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.

possible duplicate: http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it — Kapila Perera, Mar 15 '17 at 05:29
Possible duplicate of [Use jQuery to hide a DIV when the user clicks outside of it](http://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) — Mariy, Mar 15 '17 at 05:49

Amrinder Singh · Accepted Answer · 2017-03-15T12:45:53.577

0

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 :)

edited Mar 15 '17 at 12:45

answered Mar 15 '17 at 05:45

Amrinder Singh

5,300
12
46
88

is it possible to trigger toggle instead of hide()--- i want the toggle to be invoked when clicked outside. – The Naga Tanker Mar 15 '17 at 12:11
@TheNagaTanker i have updated my answer, just try it – Amrinder Singh Mar 15 '17 at 12:48
thanks it works -- but the menu keeps toggling when ever i click on the body or anywhere .... ill try to create a jsfiddle example... – The Naga Tanker Mar 16 '17 at 05:32
@Insomnia -- issue resolved using remove class --- thank you so much for your help --- here is the updated link solved link https://jsfiddle.net/qvn6ddep/34/ – The Naga Tanker Mar 16 '17 at 06:31
ohh--- forgot about that --- there you go, its done... thanks again. – The Naga Tanker Mar 16 '17 at 10:13

score -2 · Answer 2 · answered Mar 15 '17 at 05:31

-2

Hope this helps you.

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

answered Mar 15 '17 at 05:31

Muralidharan Deenathayalan

1,486
1
8
17

1

body click event trigger on any where withing page including the menu. he needs outside of the menu. – Kapila Perera Mar 15 '17 at 05:52

close side menu when clicked outside

2 Answers2

Linked

Related