5

我的问题如下：我有一个触发器（a）和一个弹出窗口（div）。div 并不嵌套在锚点内。

  • 当我将鼠标悬停在 a 上时，我希望 div 出现。
  • 当我从 a 转到 div 时，我希望它保持可见。
  • 当我离开 div 时，我希望它关闭。
  • 当我将鼠标悬停在 a 上并离开而不进入 div 时，我希望 div 关闭。

我已经弄清楚了大部分，但现在我正在努力解决要求。2.在a上检查mouseleave时，我检查div上是否有mouseenter。如果是，我想中止鼠标离开。如果没有，我想关闭 div。

我究竟做错了什么？这甚至是正确的方法吗？

这是标记：

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a>
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div>

这是jQuery：

$('.popup_toggle').mouseenter(function() {
        var element = $(this).next('.popup_div');
        $.data(this, 'timer', setTimeout(function() {
            element.show(100);
        }, 500));
    });

    $('.popup_toggle').mouseleave(function() {
        clearTimeout($.data(this, 'timer'));
            if($('.popup_div').mouseenter==true)
            {
                return false;
            }
            else
            {
                $('.popup_div').hide(100)
            };
    });
4

3 回答 3

2

你想要做的很简单。进入触发器时，识别面板（图层、弹出窗口等），使用 .data() 保存彼此的引用，并让事件处理程序检查相关目标是触发器（从面板视图）还是面板（从触发器视图）。我把东西扔在一起。查看控制台日志以了解其工作原理…… http://jsfiddle.net/rodneyrehm/X5uRD/

于 2011-10-11T12:05:50.887 回答
1

那很可能行不通……不。我建议你也为你的元素添加一个mouseenter和mouseleave回调，<div>并让他们设置一个全局变量，告诉你的其他回调如何处理他们的事件，即“如果全局变量为真，不要在 mouseleave 上隐藏弹出窗口，否则隐藏弹出窗口”或类似的东西。

mouseleave另一种方法是在回调尝试隐藏弹出窗口时检查鼠标是否在弹出窗口内。不过，这可能比它的价值要多得多。

于 2011-10-11T11:05:32.653 回答
1

我相信您的实施的问题是mouseenteron the将在fromdiv之后不久触发。mouseleavea

这会给你类似的东西：

$('.popup_toggle').mouseenter(function() {
    // Clear any pending "hide" timer
    // Set a show timer
});

$('.popup_toggle').mouseleave(function() {
    // Clear any pending "show" timer
    // Set a hide timer
});

$('.popup_div').mouseenter(function() {
    // Clear any pending "hide" timer
});

请注意，您必须确保从.popup_toggle事件和.popup_div事件访问相同的计时器。您可能需要考虑使用 Ben Alman 的doTimeout插件来帮助解决此问题。它（通常）会产生比手动使用setTimeout/更清晰的代码clearTimeout。

于 2011-10-11T11:44:25.540 回答