Question

I’m building a dropdown menu. When you click the arrow the dropdown opens.

When the menu is open I want to close the menu on menu item click or on document blur. But it doesn’t seem like I want to bind the following as so:

$(document.body).bind('click',function(e) {
    if(menuopen) {

As that would be tracking all clicks for just the menu. Is there a way to only have this bind working when the menu is open and unbind when the menu is closed?

Thanks

Answer 1

How about something like this?

$(document.body).on("click blur", function () {
  $("div.dropdown.open").removeClass("open");
})

$("div.dropdown div.arrow").on("click", function () {
  $(this).closest("div.dropdown").addClass("open");
})

This is assuming that the adding the .open CSS class shows the menu, while removing it hides the menu.

Note that .on() is available as of jQuery 1.7. Earlier versions use .bind() or .delegate() for the same effect.