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

此目标是创建一个脚本，该脚本可用于同一页面上的多个下拉列表。下拉列表的内容多种多样（图片、列表等），因此本主题将只关注下拉列表的基本内容（打开/关闭/样式）

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

我正处于如何只做一个DIV显示的过程中，所以如果一个下拉是打开的，并且其他的下拉被点击，第一个打开的应该自动关闭（隐藏）。我完全是jQuery的初学者，所以非常感谢所有的帮助，如果你能在代码中留下评论，那就太好了，这样我就可以得到它并学习一些东西

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

稍后，下拉列表还需要一个特殊的函数，我希望可以在jQuery中实现。当关闭下拉列表时（到目前为止我还没有真正完成），应该有两种不同的方法：

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

---

对不起，英语不好。

看看这把小提琴：

对于“单击其中一行时，另一行关闭”的部分，我只是在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();
}

---

哇，你在5分钟内写的代码比我在几个小时内写的更高效。这太棒了！我肯定会把这段代码弄乱，直到我从中学到一些东西。你想看看我提到的那个小的特殊功能吗？我不知道使用jQuery是否可以做到这一点。非常感谢！您已经帮了很多忙。jquery的一切都是可能的，您的意思是：？如果是，请检查我添加的最后一个函数。很高兴听到这个消息。你的意思是在最后一个函数中重命名该类（.drop），并将该类赋予一个“#drop_x”div？不需要，最后一个函数可以工作，只要你的所有选项都具有该类drop。好的，我想我在第一篇文章中解释得不好。基本下拉功能现在运行得很好，额外的功能是这样的：当下拉菜单关闭时，单击任意位置（在标题处、在下拉菜单中、在下拉菜单外）。我需要的是为一些下拉列表（不是全部，大多数是关闭的，因为他们现在是）提供一个额外的功能，这样当在下拉列表中单击时它们不会关闭（如果有许多设置等=多次单击），所以一些下拉列表只会在单击标题或在下拉列表之外时关闭，我想最有效的方法是在这些下拉列表中添加一个类。谢谢你抽出时间。