单击使用jQuery显示/隐藏div以创建"单击菜单"

我是jQuery的新手,需要一些帮助才能在点击时显示和隐藏div.基本上我需要在用户点击链接后显示一个div(包含一个小菜单),并且只要用户点击刚刚显示的div内的链接.或者在div之外点击我需要再次隐藏div.我的HTML看起来像这样(我将存在于页面上的许多地方).

Menu

 
Menu option 1
 
Menu option 2

我还有一个包含整个页面的div,我认为我会设置另一个点击事件来隐藏div(以捕获实际菜单之外的点击).

这是解决这个问题的正确方法吗？然后我如何删除包装器div上的处理程序等等.我还应该想到什么才能做到这一点(如果这是正确的方法)？

更新:根据下面接受的答案,我添加了这个来解决它

//Need to return false here, otherwise the event will bubble up and trigger the hide on body
$('.menu').click(function() { $('.menu-content').hide();$(this).next().show();return false; });
$('body, .menu-content a').click(function() { $('.menu-content').hide();});
$('.menu-content a').click(function() { alert($(this)); });

Scott Evernd.. 14

html:

Menu

 
Menu option 1
 
Menu option 2


script:

$('.menu').click(function() { $(this).next('.a_menu').show(); });
$('body, .a_menu a').click(function() { $('.a_menu').hide(); });

我会用SPANS替换标签,而不是用'cursor:pointer'设置样式

html:

Menu

 
Menu option 1
 
Menu option 2


script:

$('.menu').click(function() { $(this).next('.a_menu').show(); });
$('body, .a_menu a').click(function() { $('.a_menu').hide(); });

我会用SPANS替换标签,而不是用'cursor:pointer'设置样式