Question

I have a problem with toggling and document functions, maybe someone can help me improve my function.

I have a toggle function that can open and close an element. If you click on the element, it opens. Then if you click on it again, it closes, which the toggle function works. I however went on to the next level where if you click on the element, it will open, and if you click outside the element (document), it closes.

However, when I click on the element again after clicking outside, I would have to click twice because it didn’t to the final toggle action to close. How do I make it so i don’t have to click on the element twice when I click outside to close the element. Does this make sense?

<ul>
<li id='drop'>down</li>
<ul id='menu'>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>

$('li#drop').toggle(function () {
    //show its submenu
    $('ul', this).show();
}, function () {
    //hide its submenu
    $('ul', this).hide();
}
);
$(document).click(function(){
    $('ul#menu').hide();
});

Answer 1

Instead of using .toggle(), you can test if the ul is visible when the li is clicked

$('li#drop').click(function(e){
  e.stopPropagation();

  if($('ul#menu').is(':visible')) {
    $('ul#menu').hide();
  }
  else {
    $('ul#menu').show();
  }
});