Click anywhere but in the div to close menu

Question

I'm trying to close a menu when the user clicks anywhere but in it.

I've tried a few options from this question but this is the closest one that worked: https://stackoverflow.com/a/12661833/609630

Essentially this:

$(document).click(function(e){
    // Check if click was triggered on or within #menu_content
    if( $(e.target).closest("#menu_content, #menu-item-2003 a, #menu-item-2003 ul li a").length > 0 ) {
      return false;
    }
    $("#menu-item-2003 ul").slideUp( "slow", function() {
    // Animation complete.
    });
});

#menu_content is the div that opens up and #menu-item-2003 a is the link that is clicked to open the menu. #menu-item-2003 ul li a are the links deeper within the menu.

I've got a lot going on within #menu_content... using the code above has killed the links within it (#menu-item-2003 ul li a), how can I make those work again? Apart from that the code works.

`if (!$(e.target).hasClass('open'))`? – treyBake Sep 12 '18 at 13:47 — treyBake, Sep 12 '18 at 13:47
can you add code snippet? – Marat Badykov Sep 12 '18 at 13:52 — Marat Badykov, Sep 12 '18 at 13:52

score 1 · Accepted Answer · answered Sep 12 '18 at 13:57

I would reverse the if so that you don't have to return false:

$(document).click(function(e) {
  // Check if click was triggered on or within #menu_content
  if (!$(e.target).closest("#menu_content, #menu-item-2003 a, #menu-item-2003 ul li a").length) {

    $("#menu-item-2003 ul").slideUp("slow", function() {
      // Animation complete.
    });
  }
});

Click anywhere but in the div to close menu

1 Answers1