我在 jQuery $ 上使用 jQuery
.$.animate({height: 'toggle', opacity: 'toggle'})
显示绝对 div
.hover()
我有一个 jQuery UI 日期选择器附加到上述绝对 div
内的 div,其中包含 changeMonth: true
和 changeYear: true
。
当更改月份或年份或选择日期时,动画会触发。
如何防止月/年更改和日期选择触发 $.hover()
?
html
<div id="hoverAnchor">hover me</div>
<div id="hoverMe" style="display:none">
arbitrary text
<div id="dateSelector"></div>
</div>
js
$(document).ready(function () {
$("#dateSelector").datepicker({
changeMonth: true,
changeYear: true
});
$("#hoverAnchor").add($("#hoverMe")).hover(function(){
$("#hoverMe").stop(true,false).animate({
height: 'toggle',
opacity: 'toggle'
}, 200);
});
});
最佳答案
您需要做一些事情才能使其正常工作。
首先,您需要将 HTML 包装在 div
中作为容器:
HTML:
<div id="container">
<div id="hoverAnchor">hover me</div>
<div id="hoverMe" style="display:none">arbitrary text
<div id="dateSelector"></div>
</div>
</div>
下一步,而不是使用 .hover()
(有时可能不可靠),我建议使用 .mouseenter()
以及.mouseleave()
。还可以使用 var
来保存日期选择器是否打开/关闭的 bool 值。这个 bool 值的原因是由于输入
。单击时,将调用第二个 .mouseenter()
事件,因此如果没有它,#hoverme
将再次切换。
$(document).ready(function () {
$("#dateSelector").datepicker({
changeMonth: true,
changeYear: true
});
var _enter = false;
$("#container").add(
$("#container")).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);
});
});
演示: http://jsfiddle.net/dirtyd77/e3zP2/18/
希望这有帮助!
关于jquery - 防止日期选择器触发父鼠标离开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16195454/