Javascript 像stackoverflow一样创建多个下拉列表

我想做一个像这个网站一样的下拉菜单。我想让三件事发生

单击时显示下拉列表

一次只显示一个下拉列表，因此单击另一个下拉链接将删除显示下拉列表并添加您单击的下拉列表

单击同一下拉链接或在下拉列表外部单击时删除显示的下拉列表 我不确定是否需要插件，或者最好的方法是通过编写自己的代码来创建插件。
这是我的代码，它工作良好，但唯一的问题是，它没有删除显示的下拉列表时，点击相同的下拉链接

$（'a#menu1'）。单击（函数（）{
$（“div#1”）.show（）；
});
$（'a#menu2'）。单击（函数（）{
$（“div#2”）.show（）；
});
$（'a#menu3'）。单击（函数（）{
$（“div#3”）.show（）；
});
$（文档）.mouseup（函数（e）
{
var container=新数组（）；
container.push（$（'.display_menu1'）；
container.push（$（'.display_menu2'）；
container.push（$（'.display_menu3'）；
$.each（容器、函数（键、值）{
if（！$（value）.is（e.target）//如果单击的目标不是容器。。。
&&$（value）.has（e.target）.length==0）/…或容器的后代
{
$（value.hide（）；
}
});
});
div.body{
背景色：白色；
宽度：100%；
高度：400px；
边框：1px纯灰；
}
div.display_菜单1{
显示：无；
}
分区显示菜单2{
显示：无；
}
分区显示菜单3{
显示：无；
}
保险商实验室{
利润率：0.30px0；
填充：0px；
}
李{
显示：内联块；
}
a、 展示{
显示：内联块；
背景颜色：浅蓝色；
填充：10px 20px；
文字装饰：无；
}
分区显示{
背景颜色：灰色；
宽度：200px；
高度：100px；
}









这是下拉菜单1！
这是下拉菜单2！
这是下拉菜单3！
好的做法是使用不带ID的类。。因此，在我的下一个示例中，我将使用
data
属性，并对所有div使用相同的类


$（'a[数据菜单]）。单击（函数（）{
var menu_num=$（this.data（'menu'）；//获取href data menu属性以从中获取div id
$（'.display_menu'）。不是（$（'.#'+menu_num））。隐藏（0）；//隐藏所有div，但不隐藏打开的div
$（“#”+menu_num）.slideToggle（100）；//切换已显示的div。此slideToggle将通过单击

这是下拉菜单1！ 这是下拉菜单2！ 这是下拉菜单3！

---

Inside on click函数检查div的style.display属性。如果该属性为“none”，则调用show（）否则调用hide（）。您可以使用$（“div#1”）。toggle（）代替$（“div#1”）。show（）；谢谢你的回答，但我仍然无法让它工作。这就是添加切换时发生的情况。谢谢！效果很好！当下拉列表显示时，我正在尝试在下拉列表项上添加背景色，但我无法使其工作。你可能也知道如何做吗？@Night83 answer更新。你会发现该活动再次在cssThanks上e课！我真的很感谢你的帮助