Close menu on outside click. Tricky example

Question

I have a menu that consists of tabs.

I want this menu to close on outside click and stay active when you click inside of it and open tabs.

I have found a solution here

It looks like this :

$('html').click(function() {
    //Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

But it doesn't work in my case, because after applying it, tabs become unclickable.

Here is my markup:

<button>Open menu</button>
<div class="menu">Tabbable content here</div>

Your markup doesn't include `html` or anything with id of `menucontainer` — Explosion Pills, Feb 06 '13 at 11:48

score 0 · Answer 1 · answered Feb 06 '13 at 11:54

0

You need to do the following to make this work:

HTML

<button id= "open">Open menu</button>
<div class="menu">Tabbable content here</div>

jQuery

$(".menu").hide();
$('html').click(function() {
$(".menu").hide();
});

$('#open').click(function(event){
event.stopPropagation();
$(".menu").show();
});

JsFIDDLE HERE

answered Feb 06 '13 at 11:54

ROY Finley

1,406
1
9
18

Your fiddle doesn't work as clicking the menu also hides it. You would have to add `stopPropagation` to both the button and menu click. – Nope Feb 06 '13 at 12:03
That's the problem. When I click inside .menu div it closes it. – jonny pixel Feb 06 '13 at 12:03

Nope · Answer 2 · 2013-02-06T12:08:04.120

Check in the html click event that the click did not originate from within the menu or the button and close it if it did not, similar to this:

DEMO - Only hide if anything other than meny or button was clicked

The benefit here is that instead of having click events bound to multiple elements with stopPropagation you have a single place to keep your logic.

In addition any functionality which relies on the click to bubble throug stays intact as you only inspect the source of the click in a focused scope which requires you to differentiate it.

Code from DEMO:

$('html').click(function(event) {
  var $menu = $(".menu");
  var $button = $("#open");

  if(event.target !== $menu[0] && event.target !== $button[0]){
    // add code here to close your menu...
    $(".menu").hide(); // or similar code
  }
});

$('#open').click(function(event) {
  $(".menu").show();
});

In most cases where you only have 1 other click, stopPropagation is great but in your case where you need more control I believe insepcting the source might be a better choice.

Off course, binding a click event with stopPropagation to all other elements instead would propably work as well.

This doesn't work for some reason. I think some syntax error. — jonny pixel, Feb 06 '13 at 12:08
@jonnypixel: The DEMO was working; Though there was a `;` missing after the button variable. I added it and saved it again. The demo passes the JSHint validation in the fiddle and is working fine for me in Chrome, FireFox and IE9. Can't test IE8 as jsFidde application is messed up in IE8 and you can't see the sections. If there is a miss-match in selectors let me know your exact HTML and I can adjust to fit. Or have a play around with the fiddle :) — Nope, Feb 06 '13 at 12:12

Close menu on outside click. Tricky example

2 Answers2