创建多个 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");

然后对于您的第二个请求，我在文档上添加了一个功能 click ：

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

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

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