jQuery:单击时菜单出现/消失

Question

我查遍了整个网络，但找不到解决方案。我对 jQuery 也很陌生。

我的案例:

我有一个导航栏，其中的每个链接都会激活/触发一个megamenu(每个链接都有自己的megamenu)。

我需要什么:

我需要一种方法让每个链接激活自己的megamenu，megamenu应该在以下情况下关闭:

1. 用户点击导航栏中的另一个项目。

2. 用户点击导航栏中的同一项目。

3. 用户单击megamenu 内的“关闭按钮”(X) 图形(为简单起见，未在 HTML 中显示)。

HTML:

<div id="top-nav">
 <ul>
  <li><span>Products &amp; Services</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Support &amp; Training</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Communities</span>
    <ul>
     <li> <div class="megamenu">Content here...</div></li>
    </ul>
  </li>
  <li><span>Store</span>
    <ul>
      <li><div class="megamenu">Content here...</div></li>
    </ul>
  </li>
 </ul>
</div>

我看过“性感下拉菜单”的脚本，但问题是它关闭了通过单击悬停触发的菜单，正如我所说，我是 jQuery 新手，我不明白一种使其适应我需要的方法。

http://www.sohtanaka.com/web-design/examples/drop-down-menu/

任何帮助将不胜感激。

谢谢。

Answer 1

我得到了另一个解决方案，它也很有魅力:

$(function(){
//Megamenus
$('#top-nav li').click(function(){//set up a click event for the li
    $(this).siblings('.active').click();//click any other lis which are active to close their menus
    $(this).find('.megamenu').toggle();//toggle the child megamenu
    $(this).toggleClass('active');//toggle a class so we can identify any open megamenus
});

$('.megamenu').click(function(event){//hide the megamenu on load and set up a click event..
    $(this).parents('li').click();//..that just clicks the parent li
    event.stopPropagation();//stop the click bubbling up to the parent li
  });
});

我现在的问题是这两种解决方案哪个更好用？不过，现在这是一个好问题:p

解决方案提供于:http://codingforums.com/showpost.php?p=1016305&postcount=2