jQuery: Click Anywhere But Some Element

jquery-logo-post-headerPicture it. I have a clickable main navigation. This click expands a sub-menu. It’s all styled and looks great. However, if you click outside of an already expanded sub-menu, said sub-menu is still shown.

So the problem is I need to attach an event to a click anywhere but my main navigation. Simple? I did a little searching and found this article over at StackOverflow. The solution is not only simple, but elegant as well.

Consider this jQuery

$(document).click(function(e) {
  if ( $(e.target).closest('.navigation').length === 0 ) {
    // hide menu here

I had not heard of the jQuery .closest() method before today. Not sure how I missed it, but it’s an incredibly useful tool. It crawls up the DOM looking for the next “closest” element with the passed in selector. If it finds it you’ll have a list with one element, if not you’ll have a list with no elements.

So the code above tests to see if our .navigation was somewhere up the DOM from our currently clicked target element. If it didn’t find it, then a click occurred outside the navigation, therefore we’ll need to call code to retract all sub-menus. If it did find it, well that means a click occurred inside the main navigation somewhere and our reset code will be ignored.

Read up on .closest() right here.

Posted in: Development  |  Tagged with: ,  |  Leave a comment
3 comments on “jQuery: Click Anywhere But Some Element
  1. Excellent tutorial, just what I was looking for!

  2. Tonyshin says:

    Thanks! This is actually what I am looking for solving the dropdown block problem.

Leave a Reply to Tonyshin Cancel reply

Most recent work

  • Reductress Education Online satire workshops from the one and only Reductress.
  • Douglass Interior Products Since 1978, Douglass Interior Products has been providing exceptional materials for the aircraft, marine, automotive and interior design industries.
  • Betty Mills Betty Mills is an e-commerce store offering cleaning, sanitary & medical supplies.
  • Reductress I crank out on-going web projects for Reductress. Super fun as you can imagine.

Need hosting?

  • Media Temple My go to hosting provider. You get rockstar hosting and I make a little cash. No pressure, just clean honest fun.

Past work

  • How To Win At Feminism The badasses over at Reductress are at it again with their new book How To Win At Feminism.
  • Nice Manners Music Nice Manners is an LA based recording studio offering their clients all sorts of digital audio services. This is a demo of an internal genre based music search & player I built for them. I am ecstatic about launching this project—check it out.
  • Our Restroom Our Restroom is an (inter)national crowdsourced campaign who’s goal is simple: compel businesses to make their single occupancy restrooms gender neutral. Championed by Kristin Russo, designed by Allison Weiss, built by me on WordPress.
  • Get Your Shit Together This is a site dedicated to helping you get your shit together before an unexpected tragedy, like the loss of a loved one.
  • IHG Instagram Sweepstakes An awesome Instagram driven sweepstakes site for IHG.
  • Trivial Beersuit A site that provides professional pub trivia to bars and restaurants.
  • Audi YouTube Channel This site was a quick turn-around hair pulling adventure for the Super Bowl: revamping Audi’s YouTube Channel.
  • Everyone Is Gay Everyone Is Gay is an indispensable question and answer resource for the LGBTQ community. Hell, it’s great advice for anyone with a body with an emotion or two. I made the site responsive among other things. Give it a look see.
  • Teach.org The new Teach.org. Providing tools to help students become teachers.
  • Valhalla DSP A one man Seattle based company, writing pretty sick professional audio plugins. Check ’em out!
  • Christine Chaney Creative The online presence of Seattle artist Christine Chaney. Specializing in architecture, art and apparel.
  • Holiday Inn Tumblr A quick, fully responsive update to the Holiday Inn Tumblr page.
  • Microsoft's Art of Touch An artful HTML5 Microsoft website. Sadly, this site is no longer live.
  • Microsoft Hardware Healthy Computing Tool A useful little tool to help you find the perfect Microsoft mouse or keyboard.
  • Pella Professional Pella manufactures high quality doors and windows. This is their professional site.
  • Imaging the World A non-profit dedicated to providing ultrasound services in remote areas of the world.
  • Microsoft Visual Studio 2012 Launch This sweet new Visual Studio 2012 Launch website sports a mobile first, responsive web design architecture and comes in 14 different languages.
  • Ginny Ruffner: A not so still life A site for a documentary film about Seattle artist Ginny Ruffner.