gpt4 book ai didi

jquery - 防止日期选择器触发父鼠标离开

转载 作者:行者123 更新时间:2023-12-01 04:54:01 25 4
gpt4 key购买 nike

我在 jQuery $ 上使用 jQuery $.animate({height: 'toggle', opacity: 'toggle'}) 显示绝对 div .hover().

我有一个 jQuery UI 日期选择器附加到上述绝对 div 内的 div,其中包含 changeMonth: truechangeYear: true

当更改月份或年份或选择日期时,动画会触发。

如何防止月/年更改和日期选择触发 $.hover()

http://jsfiddle.net/e3zP2/

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com