防止 datepicker 触发父 mouseleave

Question

我在 jQuery $.hover() 上显示带有 jQ​​uery $.animate({height: 'toggle', opacity: 'toggle'}) 的绝对 div。

我有一个 jQuery UI 日期选择器附加到上述绝对 div 内的一个 div 和 changeMonth: true 和 changeYear: 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);
    });
    
});

Answer 1

您需要做几件事才能使其正常工作。

首先，您需要将 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 来保存日期选择器是否打开/关闭的布尔值。这个布尔值的原因是input。单击时，将调用第二个 .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/

希望这会有所帮助！