How to close this slide-in menu clicking outside?

Question

I'm currently trying things with jQuery for a mobile website. I implemented a very simple slide-in menu I found here: http://jsfiddle.net/jm36a13s/

Now I'm trying to get it to close when clicking anywhere but the menu. I tried a few suggestions I found already but for some reason I can't get it to work.

Thanks in advance!

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

Possible duplicate of [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — AGE, Nov 09 '15 at 20:52

George · Accepted Answer · 2015-11-09T21:14:22.210

2

You can remove your classes when the user clicks anywhere in the window.

Then you can stop the event bubbling up the DOM tree when either $pushMenu or $nav_list is clicked, to prevent the above:

$(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

edited Nov 09 '15 at 21:14

answered Nov 09 '15 at 20:33

George

36,413
9
66
103

it doesn't work if you click "Slideout Navigation" text or the section with class="content" – DinoMyte Nov 09 '15 at 20:56
@DinoMyte Thanks, fixed. – George Nov 09 '15 at 21:14
So I used the solution above and now I have a new problem... When I open and close a pop-up, the whole slide-in menu stops working. The little button is basically dead until I hit F5 and refresh the browser. Any ideas? – Markus Eggetsberger Nov 11 '15 at 19:38
@MarkusEggetsberger HI Markus, can you provide a live demo please? – George Nov 11 '15 at 20:01
I'm running it here at the moment: http://pce.mobi/training/runen.html - On this page you can just hit one of the 2 buttons and see how the menu stops working. Thanks a lot! – Markus Eggetsberger Nov 11 '15 at 20:04
With your page slide, are you destroying the original page and appending another? Event handlers will only be attached to elements that exist on the page at the time of attaching them. – George Nov 11 '15 at 20:07
I uploaded the page's code if you want to take a look: http://pce.mobi/dev/code.txt ---- Warning: It's probably a mess. I'm very unexperienced. – Markus Eggetsberger Nov 11 '15 at 20:18

score 0 · Answer 2 · answered Nov 09 '15 at 20:55

You may also try the following. The whole idea is to register a click event on the entire document and hide the menu if the target_id is not "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/

How to close this slide-in menu clicking outside?

2 Answers2