我的情况与我的其他问题类似prevent datepicker from triggering parent mouseleave ,但该解决方案似乎不适用于 jQuery UI 自动完成。
悬停如何也适用于自动完成子项?换句话说,如果一个 mouseenter
出现在自动完成建议上,#hoverMe
应保持打开状态。另外,关于如何处理选择
在#hoverMe
之外的选择的建议/代码,同时保持#hoverMe
显示直到一个鼠标输入
如果能回来那就太好了!
html
<div id="hoverAnchor">hover me</div>
<div id="hoverMe" style="display:none">arbitrary text
<input type="text" id="autocompletor"></div>
</div>
js
$(document).ready(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#autocompletor").autocomplete({
source: availableTags
});
var _enter = false;
$("#hoverAnchor").add($("#hoverMe")).mouseenter(function () {
if (!_enter) {
$("#hoverMe").stop(true, false).animate({
height: 'toggle',
opacity: 'toggle'
}, 200);
}
_enter = true;
}).mouseleave(function () {
_enter = false;
$("#hoverMe").stop(true, false).animate({
height: 'toggle',
opacity: 'toggle'
}, 200);
});
});
最佳答案
做这样的事情怎么样:
$(document).ready(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"];
var _enter = false;
$("#autocompletor").autocomplete({
source: availableTags,
open: function (event, ui) {
//in the event someone types into the input as #hoverMe is closing, this will prevent the list from showing
if (!_enter) $('.ui-autocomplete').hide();
}
});
$("#hoverAnchor").add($("#hoverMe")).mouseenter(function () {
if (!_enter) {
$("#hoverMe").stop(true, false).animate({
height: 'toggle',
opacity: 'toggle'
}, 200);
}
_enter = true;
}).mouseleave(function () {
if (!$('.ui-autocomplete').is(':visible') && _enter) { //check if autocomplete is open
$("#hoverMe").stop(true, false).animate({
height: 'toggle',
opacity: 'toggle'
}, 200);
_enter = false;
}
});
});
演示: http://jsfiddle.net/dirtyd77/Kzp87/3/
基本上,该列表显示在#hoverAnchor
上,并将一直显示,直到鼠标再次进入和离开输入
(但是,我们始终可以更改此设置)。我用了open-event
如果 #hideMe
不可见,则防止列表显示。希望这对您有所帮助,如果您有任何疑问,请告诉我!
关于jquery - 将父级的悬停应用于 jquery ui 自动完成子级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16197534/