所以我做了一个自定义选择器
<div class="search">
<input class="custom-selector" type="text" autocomplete="off" >
<ul class="custom-options hidden">
<li>New York</li>
<li>Moscow</li>
<li>Baku</li>
</ul>
</div>
每当我专注于输入时,隐藏的类(仅具有display:none;)就会被删除,而在blur(unfocus)上它会被添加回来
$('.custom-selector').focus(function() {
$(".custom-options").removeClass("hidden");
}).blur(function() {
$(".custom-options").addClass("hidden");
})
下一步,我需要一个onclick函数来获取li值并将其复制到输入中,但是每当我单击li时,输入都变得没有焦点,并且onclick函数无法在显示器上工作,我发现一个解决方案是不透明0而不是对隐藏类不显示任何内容,是否有更优化和正确的方法来解决此问题?
最佳答案
编辑:您可以添加timeout
吗?
$('.custom-selector').focus(function() {
$(".custom-options").removeClass("hidden");
}).blur(function() {
setTimeout(function () { $(".custom-options").addClass("hidden") }, 350);
})
$('.custom-options > li').click(function(e) {
$('.custom-selector').val($(this).text());
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
<input class="custom-selector" type="text" autocomplete="off">
<ul class="custom-options hidden">
<li>New York</li>
<li>Moscow</li>
<li>Baku</li>
</ul>
</div>
关于javascript - 由于显示属性,自定义选择器不会单击,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/60916362/