Question

我正在开发一个项目，我有多个使用PHP填充的下拉列表。每个下拉列表的ID为styleDrop，容器ID为styleCont。现在由于某种原因，在第一个下拉列表中，这是唯一似乎在我的代码中“注册”的下拉列表：

//this file is used for the styling dropdowns
$(document).ready(function () {
    //close opened dropdown and open one selected:
    $("#styleDrop").click(function(){
        var selected = $(this);
        $("#styleCont").fadeOut();
        selected.closest("#styleCont").fadeIn();
    });

});

假设发生什么：

用户将点击一个下拉列表，如果打开任何其他下拉列表，它将关闭，而用户刚刚选择的下拉列表将打开。此外，如果他们在下拉列表外单击它将关闭。

问题是这对任何其他下拉菜单及其使用的下拉菜单都不起作用，只是让它立即打开和关闭。

我不确定为什么会这样。思考？想法？

Answer 1

ID应该是唯一的。

您的选择器正在查找第一个（通过调用getElementById）并返回它。

使用类而是适当地更改您的选择器以使用“.styleCont”

<select class="styleDrop" ... >

然后......

$(".styleDrop")

Answer 2

每个下拉列表都给出了styleDrop的id

这就是为什么，id必须对页面上的每个元素都是唯一的，因此你的函数只能绑定到它在DOM中找到的第一个元素。改为使用类（即.styleDrop）。

fadeOut和fadeIn用于下拉列表 - JQuery

2 个答案: