创建多个jQuery下拉列表/选择框

Question

此目标是创建一个脚本，可以在同一页面上使用多个下拉列表。下拉内容是多种多样的（图片，列表等），因此本主题仅关注下拉基础知识（打开/关闭/样式）。

我使用三个div和两个不同的样式类来构建下拉列表（根据下拉列表是否打开）。

我正在弄清楚如何一次只制作一个div节目的过程，所以如果打开一个下拉列表并点击其他一些下拉列表，那么打开的第一个下拉列表应该自动关闭（隐藏）。我是jQuery的初学者，所以非常感谢所有的帮助，如果你能在代码中留下评论，那么我会得到它并学习一些。

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

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

稍后下拉列表还需要一个特殊的函数，我希望可以在jQuery中完成。当关闭下拉列表时（我还没有真正做到这一点）应该有两种不同的选择：

1：点击标签处或div外部（在页面上），当下拉列表中有多个设置时使用，因此可以在关闭前的下拉列表中进行多次点击。 2：点击div内部或外部的标签（当div像选择框一样工作时）。

抱歉英文不好。

Answer 1

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

对于“当你点击一个，另一个关闭”的部分，我只是在if语句中添加了这两行：

$('.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");
})

但是有一个新问题，因为你的下拉列表是文档的一部分，当你点击它时，它会立即关闭。你需要在下拉列表中停止pragation点击：

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