Question

正在构建一个稍微复杂的下拉菜单系统，使用Jquery的slideDown（）和slideUp（）动画以及＆＃34; hover（）＆＃34;事件

现在我有一个由＆＃34; hover（）＆＃34;触发的元素，正在显示另一个元素。不幸的是，不可能将这两个元素作为另一个元素的唯一子元素（因为触发器位于另一个表中）。

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

有没有办法实现这个目标？

提前致谢：）

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);
    }
});

只需跟踪主要和子项目组。有点难看，但希望它可能有所帮助。

hover（）：仅在离开外部元素时触发

1 个答案: