Javascript 与ulli的jQuery问题

我试图使用jQuery将select转换为ulli，但由于某些原因，它无法正常工作。单击Worlds按钮时，将显示一个列表。每当有人从列表中选择一个项目时，下图中的项目外观上将显示一个绿色覆盖

问题是：当您多次选择项目时，所有项目上都会显示绿色覆盖，如下所示。每个点击的项目只显示一次，就像我打开/关闭它一样

预期结果：

实际结果：

$worldBtn.onclick，函数{ $'displayWorlds'。切换； }; var allOptions=$worlds下拉列表li； $ul.onclick、li、function{ console.logclicked； allOptions.removeClass'selected'； $this.addClass'selected'； $ul.children'displayWorlds'.html$this.html； allOptions.toggle； }; $worldsClose.clickfunction a{ $'displayWorlds'。切换； a、 防止违约； }; .选定{ 背景色：rgba16、246、136、0.47； 颜色：白色； } 李{ 填充：8px 16px； 边界半径：6px； 线高：1.429； -webkit转换：.25s； 过渡：.25s； } 世界 选择1 选择2

---

尝试使用此jquery代码删除“所有世界”下拉列表中的所有选定类

 $("ul").on("click", "li", function() {

    $(".worlds-dropdown li").each(function(){
        $(this).removeClass('selected');
    });

 });

---

简单的事实是，您使用的是世界下拉列表li而不是。世界下拉列表li

我也不知道为什么你需要allOptions.toggle，因为它隐藏了li的东西。但我现在已经把它注释掉了。如果这是您的函数，您可以取消注释它

$worldBtn.onclick，函数{ $'displayWorlds'。切换； }; var allOptions=$.worlds下拉列表li； $ul.onclick、li、function{ console.logclicked； allOptions.removeClass'selected'； console.logallOptions.length； $this.addClass'selected'； $ul.children'displayWorlds'.html$this.html； //allOptions.toggle； }; $worldsClose.clickfunction a{ $'displayWorlds'。切换； a、 防止违约； }; .选定{ 背景色：rgba16、246、136、0.47； 颜色：白色； } 李{ 填充：8px 16px； 边界半径：6px； 线高：1.429； -webkit转换：.25s； 过渡：.25s； } 世界 选择1 选择2

---

你的HTML标记中的displayWorlds在哪里？糟糕，我忘了在HTML标记中添加一行。请刷新这个答案解决了我的问题！将世界下拉列表li更改为。世界下拉列表li修复了此问题。谢谢。简单的错误，不用担心