Need help toggling a clicked menu item

Need help toggling a clicked menu item

I'm new to web programming and I'm having some problems.  I'm trying to create a horizontal dropline menu out of an unordered list.  List items can have one unordered list child.  I want to add a click event on all li:has(ul) elements.  The pseudo-algorithm I'm thinking of is as follows:


  • Find all other li:has(ul) elements on the page.
  • For each, check if they are displayed.
  • If displayed, hide it.
  • Then, if the clicked li is displayed, hide it.  Otherwise display it.
Only one li:has(ul) element should be displayed at a time.
  2. <script type="text/javascript">
  3. $(function(){
  4.         $('li:has(ul)').click(function(event)
  5. {
  6. $('li:has(ul)').each(function() {
  7.  if ($(this).hasClass('open')) 
  8.   {
  9. $(this).removeClass('open'); 
  10. $(this).children('ul').toggle();
  11. }
  12.  });
  13. $(this).addClass('open');
  14. $(this).children('ul').toggle();
  15. return false;
  16.  })
  17.       });
  18. </script>
What I have doesn't work because in the .each() function, the clicked li is also evaluated.  So, if the clicked li is already visible, it gets toggled inside that function and then toggled again outside that function.  Any help would be greatly appreciated!