Question

我有两个具有相同标记的自定义下拉列表。我需要一次只有一个节目。现在，我可以同时打开两个。当我点击列表时，两者也应该关闭。

两个列表都需要相同的标记，因此我无法使用唯一ID或其他类来实现此目的。

以下是我的小提琴示例的链接：http://jsfiddle.net/dg7Lc/29/

非常感谢任何帮助，谢谢！

-D

Answer 1

$('.custom-select').eq(0).hide()会隐藏第一个。

使用.show()代替.hide()来显示（显然）并将索引更改为(1)以获得第二个。

Answer 2

首先想到的是，如果你可以在一个或两个周围包裹一个span或div，并使用它来绕过＆＃34;相同的标记＆＃34;局限性。除此之外，我建议在页面中使用顺序 - 使用.next（）和.prev（）来获取它们之类的东西，比如

$("div.custom-select").get(0)

或

$("div.custom-select").get(1)

从外面选择它们。

编辑：如果你可以通过onmouseover，onchange或诸如此类的东西来运行它们，那就更容易了 - 那些正在改变的那个将作为＆＃34;传递给函数。这＆＃34;参数。只需隐藏它们，然后显示它，或显示两者并隐藏它。

edit2：类似地，一旦你有一个正确隐藏 - 好吧，那个将被隐藏，并回应＆＃34;隐藏＆＃34;选择。在显示或隐藏任何其他内容之前，用它来区分它们（并将区别保存为jquery变量）

Answer 3

隐藏第一个：

$('.custom-select').first().hide();

隐藏第二个：

$('.custom-select').last().hide();

然后将这些代码放在需要的地方。

Answer 4

当你点击其中一个时，考虑通过jquery添加一个数据属性，例如'active'，然后隐藏所有具有该属性的属性。

Answer 5

http://jsfiddle.net/dg7Lc/31/

基本上，关闭其他人：

$('.custom-select').not(this).find('ul').slideUp('fast');

如果在框外单击时关闭，我使用了这段代码，但它有点脏：

$("body").click(function(e) {
    var should = true;
    for($e = $(e.target); should && $e.length; $e = $e.parent()) {
        should = !$e.is(".custom-select");
    }
    if(should) {
        $('.custom-select').find('ul').slideUp('fast');
    }
});

Answer 6

您可以将单击绑定到文档，查看是否单击了自定义选项或其外部的文档，并隐藏任何打开的列表：

$(document).click(function(ev){
    if(!$(ev.target).is('.custom-select span')){ $('.custom-select').find('ul').slideUp('fast'); }
});

Updated JSFiddle

如何通过jquery隐藏具有相同标记的元素？

6 个答案: