javascript - 模糊不适用于 Chrome 上的选择菜单

标签 javascript jquery

我想要在打开时模糊选择菜单。当您将鼠标悬停在标签上时,我制作了一个小功能,然后将调用模糊功能。它在其他浏览器中工作正常,但在 Chrome 中不工作。 fiddle

重现错误:单击并打开选择菜单并悬停 anchor 标记,打开的选择菜单应关闭

<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
   $('a').hover(function(){
    $('select').blur();
   })
})
</script>
</head>
<body>
<select>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
<a href="#">hover me</a>
</body>
</html>

最佳答案

我遇到了同样的问题,思路很明确:您不能模糊打开的选择元素,因为 Chrome 和 Safari 正在等待答案。但是有一种您可能会觉得可以接受的解决方法。

首先,当“select”仍处于事件状态时,您无法将焦点设置到另一个元素,因此我通过应用“display:none”将其删除。 之后,我触发了另一个无害元素的点击事件。 然后我通过设置 display:block 重新添加选择。 在这种情况下,代码看起来像(我将添加一个 span 来点击):

.......
<select>
<option>Test</option>
......
</select>
<a href="#">hover me</a>
<span class="clickable">element clicked</span>
.......
<script type="text/javascript">
$(document).ready(function (){
    jQuery("a").mouseenter(function (){
        $("select").css({'display':'none'});
        $("span.clickable").focus().click();
        $("select").css({'display':'block'});
    });    
});
</script>

关于javascript - 模糊不适用于 Chrome 上的选择菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16690682/

相关文章:

javascript - 如何深度克隆这部分javascript?

javascript - 从父元素中删除一个元素并将其附加到其他元素

jquery - Highcharts:Y 轴上的第一个 X 点

Javascript 计算器在 Firefox 中不工作

javascript - 更新已实例化的图表数据

javascript - 在 Angular 6 中处理来自 Google Charts 的选择事件(没有包装器,例如 ng2-google-charts!)

javascript - 如何在覆盖后调用原始方法

Javascript:巴恩斯利蕨类植物分形

JavaScript 函数调用(在 switch 中)

javascript - 仅在验证文件大小和文件扩展名后提交表单