Question

我在jQuery abolute上显示带有jQuery div的{{1}} $.animate({height: 'toggle', opacity: 'toggle'})。

我有一个jQuery UI datepicker附加到上述$.hover() absolute中包含div和changeMonth: true的div。

如果更改月份或年份或选择日期，则会触发动画。

如何防止月/年变化＆amp;触发changeYear: true的日期选择？

HTML

$.hover()

JS

<div id="hoverAnchor">hover me</div>
<div id="hoverMe" style="display:none">
    arbitrary text
    <div id="dateSelector"></div>
</div>

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来保存datepicker是否打开/关闭的布尔值。这个布尔值的原因是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/

希望这有帮助！

防止datepicker触发父mouseleave

1 个答案: