当我在 IE 11 中打开此 HTML 并允许编写脚本时，单击下拉菜单会导致它闪烁并立即消失。有任何想法吗？
这是来自一个更大的应用程序，具有样式和其他元素，但这里是重现它的最低限度。
我留下了一些尝试抵消这种情况的技巧 - 在 onclick 和 onmouseover 中，您可以看到我拥有的试图删除属性的脚本。然而，无论什么破坏了下拉菜单，它都已经被破坏了。当我删除 HTML 顶部的脚本以使工具提示出现时，它甚至会发生；它没有出现，但下拉列表仍然损坏。
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("[data-tooltip-open=true]").tooltip({
items: "[data-content=true]", content: $(this).data('content'),
position: {
my: "center bottom-20",
at: "center top",
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}).tooltip("open");
});
</script><body>
<form>
<select name="test"
title="A selection from this list is required."
data-tooltip-open="true" data-content="true"
onclick="$(this).attr('data-tooltip-open','false');$(this).attr('title','');$(this).attr('data-content','false');"
onmouseover="$(this).attr('data-tooltip-open','false');$(this).attr('title','');$(this).attr('data-content','false');">
<option value=""></option>
<option value=" "> </option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</form>
</body>
</html>
感谢任何帮助。谢谢。
最佳答案
出于奇怪的原因，设置标题 $(this).attr('title', '') 或 this.title = '' 会关闭下拉菜单.
在 IE11
中尝试以下 HTML使用 jQuery 的代码 .attr,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="test" title="A selection from this list is required." onclick="$(this).attr('title', '')">
<option value=""></option>
<option value=" "></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>代码使用this.title,
<select name="test" title="A selection from this list is required." onclick="this.title = (this.title == '')?'Test':'';">
<option value=""></option>
<option value=" "></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>缩小范围后，我还在 jQuery 错误跟踪器中发现了这个问题 http://bugs.jqueryui.com/ticket/8798
解决方案:
现在我们知道了原因，您可以避免使用 title 属性来管理您的工具提示，而是使用数据 customtooltip 并在插件中使用它。
<select name="test"
data-tooltip-open="true"
data-content="true"
data-customtooltip="A selection from this list is required.">
然后在插件选项中:
content: $("[data-tooltip-open=true]").data('customtooltip'),
在 IE 11 中尝试以下并让我知道..
$(function() {
$("[data-tooltip-open=true]").tooltip({
items: "[data-content=true]",
content: $("[data-tooltip-open=true]").data('customtooltip'),
position: {
my: "center bottom-20",
at: "center top",
using: function(position, feedback) {
$(this).css(position);
$("<div>")
.addClass("arrow")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}).tooltip("open");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<select name="test" data-tooltip-open="true" data-content="true" data-customtooltip="A selection from this list is required.">
<option value=""></option>
<option value=" "></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>关于javascript - JqueryUI 工具提示阻止 <select> 元素下拉列表在 IE 11 中停留，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26936300/