ul li的jQuery问题

Question

我试图通过使用jQuery将select转换为ul li，但由于某种原因它无法正常工作。单击Worlds按钮时，将显示一个列表。每当有人从列表中选择一个项目时，项目上方将显示绿色叠加层（请参见下图）。

问题在于：当您多次选择项目时，绿色叠加层会显示在所有项目上，如下所示。它只应该点击每个项目显示一次，就像我打开/关闭它一样。

预期结果：http://jsfiddle.net/Starx/a6NJk/2/

实际结果：

＆＃13;

＆＃13;

$("#worldBtn").on("click", function() {
   $('#displayWorlds').toggle();
});

var allOptions = $("#worlds-dropdown li");

$("ul").on("click", "li", function() {
   console.log("clicked");
   allOptions.removeClass('selected');
   $(this).addClass('selected');
   $("ul").children('#displayWorlds').html($(this).html());
   allOptions.toggle();
});

$("#worldsClose").click(function (a) {
   $('#displayWorlds').toggle();
   a.preventDefault();
});

＆＃13;

.selected {
background-color: rgba(16, 246, 136, 0.47);
color: white;
}

li {
padding: 8px 16px;
border-radius: 6px;
line-height: 1.429;
-webkit-transition: .25s;
transition: .25s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="worldBtn" type="button" class="btn btn-purple">Worlds <i class="fa fa-globe"></i></button>

<div class="bitblobs-panel bitblobs-side-panel bitblobs-worlds-panel" id="displayWorlds" style="display: none;">
<ul class="worlds-dropdown custom-scrollbar" id="worldsClose">
    <li onclick="setserver('server.localhost:551');">
        <div class="worlds-text">Option 1</div>
    </li>
    <li onclick="setserver('server.localhost:551');">
        <div class="worlds-text">Option 2</div>
    </li>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您使用#worlds-dropdown li代替.worlds-dropdown li的简单事实。

我也不知道为什么你需要allOptions.toggle()隐藏li内容。但我现在已经评论过了。如果这是你的功能，你可以取消注释。

＆＃13;

＆＃13;

$("#worldBtn").on("click", function() {
   $('#displayWorlds').toggle();
});

var allOptions = $(".worlds-dropdown li");

$("ul").on("click", "li", function() {
   console.log("clicked");
   allOptions.removeClass('selected');
   console.log(allOptions.length);
   $(this).addClass('selected');
   $("ul").children('#displayWorlds').html($(this).html());
   //allOptions.toggle();
});

$("#worldsClose").click(function (a) {
   $('#displayWorlds').toggle();
   a.preventDefault();
});

＆＃13;

.selected {
background-color: rgba(16, 246, 136, 0.47);
color: white;
}

li {
padding: 8px 16px;
border-radius: 6px;
line-height: 1.429;
-webkit-transition: .25s;
transition: .25s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="worldBtn" type="button" class="btn btn-purple">Worlds <i class="fa fa-globe"></i></button>

<div class="bitblobs-panel bitblobs-side-panel bitblobs-worlds-panel" id="displayWorlds" style="display: none;">
<ul class="worlds-dropdown custom-scrollbar" id="worldsClose">
    <li onclick="setserver('server.localhost:551');">
        <div class="worlds-text">Option 1</div>
    </li>
    <li onclick="setserver('server.localhost:551');">
        <div class="worlds-text">Option 2</div>
    </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

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

 });