Question

我们的网站上有一个页面，页面加载5秒后，我们会在其中显示一个叠加表格。如果我们单击页面中的任何选择元素以在5秒的范围内展开并等待“覆盖”表单显示，则展开的选择元素将与“覆盖”表单重叠。设计确实看起来不太好。

为解决此问题，我们在一行代码中触发了任何焦点选择元素上的模糊事件，这些选择元素关闭了扩展选择元素。此功能在Chrome，Firefox和Internet Explorer中运行良好，但在Safari和Edge中却无法正常运行。我试图通过放置一些技巧来解决此问题，但是它们都无法正常工作。任何帮助将不胜感激！

var showOverlayForm = function () {
    setTimeout(function () {
        // Do something after 5 seconds
        // ANIMATE the overlay form.
        $('select:focus').blur(); //close any open select drop down 
    }, 5000);
};

Answer 1

您会注意到，当用户选择下拉控件时，它会添加 class = focused 。

您可以尝试使用 .toggleClass（）并尝试删除该类可能会帮助您解决问题。

参考：

.toggleClass()

或者您可以尝试在屏幕上显示任何消息5秒钟，或显示进度条以吸引用户5秒钟。

Answer 2

我放入了以下hack，它在IE中可以正常工作，但在Safari中却不能。

var $select =  $('select:focus');
var $newSelect = $select.clone();
$select.insertBefore($newSelect);
$select.remove();

有什么想法/建议吗？

jQuery（'select：focus'）。blur（）在Safari和Edge中不起作用

2 个答案: