Jquery 仅当元素已显示时才需要隐藏该元素

我在一个网站上工作，我创建了一个下拉菜单。当您单击“关于我”链接时，菜单将打开，其中会显示更多的链接，如传记、兴趣等。。我可以通过点击“关于我”链接来打开和关闭菜单。这里是我的问题：我想写一些代码，这样下拉菜单只能通过点击关于我的链接打开，但可以通过点击链接或文档上的任何其他地方来关闭。为了关闭下拉菜单，必须再次点击关于我的链接，这有点烦人。以下是迄今为止我掌握的jQuery代码：

$(".about-me").click(function() {
    $(".dropdown-menu").toggle();
});

我试着添加一个

$(document).click(function() {
    $(".dropdown-menu").hide();
});

---

但由于About Me链接也是文档的一部分，因此单击该链接将永远不会首先打开下拉菜单。非常感谢您的帮助

停止链接上的单击事件向上传播DOM并触发对文档的单击：

$(".about-me").click(function(e) {
    e.stopPropagation();
    $(".dropdown-menu").toggle();
});

---

单击除“关于我”链接以外的任意位置：$'：not.aboutMe'.clickfunction{}；小心使用。可能重复：