我正在尝试使用 jQuery 将 select 转换为 ul li,但由于某些原因它无法正常工作。单击 Worlds
按钮时,将显示一个列表。每次有人从列表中选择一个元素时,都会在该元素上显示一个绿色覆盖层(见下图)。
这是问题所在:当您多次选择元素时,绿色覆盖层显示在所有元素上,如下所示。它应该只在每个元素被点击时显示一次,就像我打开/关闭它一样。
预期结果:http://jsfiddle.net/Starx/a6NJk/2/
$("#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();
});
.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;
}
<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>
最佳答案
您正在使用 #worlds-dropdown li
而不是 .worlds-dropdown li
的简单事实。
我也不知道为什么你需要 allOptions.toggle()
因为它隐藏了 li
东西。但我现在已经把它注释掉了。如果这是您的功能,您可以取消注释。
$("#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();
});
.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;
}
<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>
关于javascript - ul li 的 jQuery 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42592582/