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

Question

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

<a class="menu" href="#">Menu</a>
<div class="menu-content" style="display: none; position: absolute; border: 1px solid black; background-color: White;padding: 5px;">
 <div><a href="#">Menu option 1</a></div>
 <div><a href="#">Menu option 2</a></div>
</div>

我还有一个包含整个页面的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)); });

Answer 1

html:

<a class="menu" href="#">Menu</a>
<div class='a_menu' style="display: none; position: absolute; border: 1px solid black; background-color: White;padding: 5px;">
 <div><a href="#">Menu option 1</a></div>
 <div><a href="#">Menu option 2</a></div>
</div>

script:

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

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