创建多个jQuery下拉菜单/选择框

Question

此目标用于创建可在同一页面上使用多个下拉菜单的脚本。下拉内容是各种各样的（图片，列表等），所以这个话题只会关注下拉的基础知识（open/close/style）。

我使用三个div和两个不同的切换类型（取决于下拉是否打开）构建下拉列表。

我正在弄清楚如何一次只做一个div显示，所以如果一个下拉菜单打开，点击其他一些下拉菜单，第一个打开的菜单应该自动关闭（隐藏）。我是jQuery的初学者，所以所有的帮助都非常值得赞赏，如果你可以在代码中留下评论，所以我可以得到它并学习一些东西。

这是代码现在的样子。我修改了一个我之前得到帮助的脚本。

http://jsfiddle.net/yup2s/1/

后来的下拉菜单还需要，我希望能在jQuery的做了特殊功能。当关闭下拉菜单时（我还没有真正做到这一点），应该有两个不同的选项，如何做到这一点：

1：点击标签或外部div（在页面），当有多个设置在下拉菜单中可以在关闭之前在下拉菜单中进行很多点击。 2：点击标签，在div的内部或外部（当div工作像一个选择框）。

对不起，英语不好。

Answer 1

看看这个小提琴：http://jsfiddle.net/yup2s/4/

对于其中“当你点击一个，另一个接近”的一部分，我只是在if语句添加那些2线：

$('.style_active').siblings('[id^=drop_]').hide(); 
$('.style_active').removeClass("style_active"); 

然后你的第二个要求，我增加了一个功能，在文档上点击：

$(document).click(function(){ 
    $('.style_active').siblings('[id^=drop_]').hide(); 
    $('.style_active').removeClass("style_active"); 
}) 

但有一个新的问题，因为你的下拉是文档的一部分，当你点击它，立即关闭。你需要停止下拉点击与分数：

$("div").on('click', function (e) { 
    e.stopPropagation(); 
}