jquery - 单击时显示/隐藏 div 使用 jQuery 创建 "click menu"

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 替换 标签，而不是使用“cursor:pointer”样式