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

Question

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

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

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

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

后来下拉菜单还需要一个特殊的功能，我希望可以在 jQuery 中完成。关闭下拉菜单时（到目前为止我还没有真正做到），应该有两种不同的选择：

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

抱歉英语不好。

score 1 · Accepted Answer

看看这个小提琴：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");
})

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

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

1 回答 1