Question

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

重现错误：点击并打开选择菜单并悬停锚标记，打开选择菜单应该关闭

<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>

Answer 1

我遇到了同样的问题，而且想法很明确：你无法模糊打开的选择元素，因为Chrome和Safari会等待答案。但是有一种可以接受的解决方法。

首先，当“select”仍处于活动状态时，您无法将焦点设置为其他元素，因此我通过应用“display：none”将其删除。之后，我在另一个无害元素上触发click事件。然后我通过设置display：block重新添加选择。在这种情况下，代码看起来像（我将添加一个范围来点击）：

.......
<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>

Answer 2

您需要使用.trigger()

<select id="selectboxId">
.......
</select>

   $ ('#selectboxId').trigger('blur');

模糊不适用于chrome上的选择菜单

2 个答案: