"un"toggling a div with jQuery
<p>I'm using jQuery's .toggle method to create a menu that opens and closes when a div is clicked. Here is my code: </p>

<pre><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(); 
}); 
</code></pre>

<p><a href="http://jsfiddle.net/bmcmahen/X9S5C/8/" rel="nofollow">http://jsfiddle.net/bmcmahen/X9S5C/8/</a></p>

<p>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? </p>
