jQuery: Close a Menu by Clicking Anywhere on the Document

Something that tripped me up when I started learning jQuery was how to stop event bubbling on events bound to the document and I searched for a while without much luck. What I wanted to do was create a jQuery dropdown menu based on an unordered list. If a user were to click a trigger, the menu would open, clicking the trigger again would cause it to close; simple enough as the example below illustrates:

Example 1 – Open and close with the same trigger

See the Pen Example 1 for Article on Site by Chris Spittles (@chrissp26) on CodePen.5094

So far it’s not exactly rocket science: you click the menu heading and it opens – you click it again and it closes! Although this is generally fine, the standard behaviour of most menus is that clicking outside of the menu would ordinarily┬ácause it to close.
In order to replicate this functionality, I need to bind a click event to the document like the example below:

Example 2 – Open and close with trigger and close with document

See the Pen gHCyx by Chris Spittles (@chrissp26) on CodePen.5094

You’ll notice in the example above that although the menu opens if you click on the panel the menu closes. This is not desired behaviour and it’s caused because the document event we created above is also applied to our dropdown menu.

The way to ensure it works everywhere is to use another click event – this time – applied to the area we don’t want to be able to click:

Example 3 – Using stopPropagation() to prevent event bubbling

See the Pen pLvof by Chris Spittles (@chrissp26) on CodePen.5094

The finished code above adds another click event to the panel itself but this time makes use of a nifty attribute which plumbs into the function’s event object (e) and stops the propagation of the click event from going any further. So… to cut a long story short use stopPropagation() to prevent event bubbling.

4 thoughts on “jQuery: Close a Menu by Clicking Anywhere on the Document

  1. I’m not an expert when it comes to this. Didn’t even know this was possible. Useful read, appreciate you posting this.

  2. Thanks for posting this, Chris. While I was just trying to get a div to slide down and then slide back up when clicked within it, your post led me in the right direction with it’s clean and concise code. You also explained it so well, I learned a lot of logic! ­čÖé

  3. Nice read, in the same phase of getting started with JQuery, having a hard time though but post like yours are an incredible help for beginners with Jquery.

  4. I know this is an old post but I stumbled across it and it was a help in getting me going. I needed a nested menu version so I drew up this fiddle using lists and removed styling : http://jsfiddle.net/robche/m9EDg. It might be an alternative starting point for someone?

    It just uses a different trigger and uses an <a> tag in the menu .

    Cheers and thanks for posting!
    Rob

Leave a Reply

Your email address will not be published. Required fields are marked *