javascript - 悬停() : Trigger only when leaving foreign element

Question

我正在使用 Jquery 的 SlideDown() 和 SlideUp() 动画以及“hover()”事件构建一个稍微复杂的下拉菜单系统。

现在我有一个由“hover()”触发的特定元素，正在显示另一个元素。不幸的是，不可能使这两个元素成为另一个元素的唯一子元素(因为触发器位于另一个表中)。

我仍然希望这个已显示的新元素一直显示，直到我的鼠标离开新元素以及触发元素。

有办法实现吗？

提前致谢:)

Answer 1

我使用 .mouseenter 和 .mouseleave 来实现你想要的: jsFiddle

var groups = {};
groups[1] = {
    main: false,
    sub: false
};
$('.menu').mouseenter(function(e) {
    var $target = $(e.target);
    var group = $target.attr('data-group');
    var type = $target.attr('data-type');
    if (!(groups[group].sub || groups[group].main)) {
        $('.sub[data-group='+ group +']').toggle(true);
    }
    groups[group][type] = true;
});

$('.menu').mouseleave(function(e) {
    var $target = $(e.target);
    var group = $target.attr('data-group');
    var type = $target.attr('data-type');
    groups[group][type] = false;
    if (!(groups[group].sub || groups[group].main)) {
        $('.sub[data-group='+ group +']').toggle(false);
    }
});

仅跟踪主项目和子项目的组。有点难看，但希望能有所帮助。