Question

I’m using jQuery’s .toggle method to create a menu that opens and closes when a div is clicked. Here is my code:

$(".header").toggle(function() {
        $(this).find(".parent").fadeIn("fast"); 
        $(this).css("background-color","red");         
    }, function() {
        $(this).find(".parent").fadeOut("fast"); 
        $(this).css("background-color","white");    
}); 

$(document).click(function() {
      $('.parent').fadeOut("fast");
     $(".header").css("background-color","white");

});

$(".parent").click(function(event){
    event.stopPropagation(); 
}); 

http://jsfiddle.net/bmcmahen/X9S5C/8/

This works well until I click outside of the pop-up menu to close it, and then try to click on the menu button again. It then requires a double click. What I need to be able to do is to untoggle the click on the div from the $(document).click function. Any idea on how I’d do this?

Answer 1

$(document).on('click', function() {
    $(".header .parent").not(':hidden').closest('.header').click();   
});

This will close ALL pop-up menus, not just the latest one opened.

Leave everything else as it is. No need to use .data() or a className.

Fiddle