Question

我正在尝试编写一个在悬停时扩展子类别的菜单 - 因此一次只能扩展一个子类别。它看起来像这样（完全扩展）：

X
- ÿ
  - Y.1
  - Y.2
- ž
  - Z.1
  - Z.2

我的问题是：

动画正常工作，除非我将鼠标悬停在Y上然后尝试将鼠标悬停在Z上，所有X都会关闭。我知道原因：因为Z开始向上移动需要延迟，所以你不再在Z上盘旋而且它开始关闭。

以下是代码：

    $( document ).ready(function() {
        $("#m2l2").hoverIntent(
            function() {
                clearTimeout(z_timer);
                $("#m2l2").toggleClass("child childopen");
                $("#u12").slideToggle("slow", "linear");
            },
            function() {
                z_timer = setTimeout(function() {
                    $("#u12").slideToggle("slow", "linear", function () {
                        $("#m2l2").toggleClass("childopen child");
                    });
                }, 10000);
            });
    });

有没有办法避免延迟或延迟只在某些情况下激活？

以下是链接：http://jsfiddle.net/stamblerre/XYp48/12/

谢谢!!!

Answer 1

这不是js代码问题而是css问题，你有一个垂直菜单，其中第3级也垂直打开。

很棘手，但尝试想象

当你的鼠标进入选项Y时，它的第3级菜单显示，现在当你在选项Z上抓鼠标时，Y的鼠标输出事件会触发并且由于选项Z的哪个位置移动而现在你的鼠标指针在外面它隐藏了它的第3级主菜单＃id =“m2l0”及其mouseout事件触发并隐藏选项Y和Z.

Answer 2

以下是使用hoverIntent jQuery Plugin

中的对象为hoverIntent添加超时的方法

$('.selector').hoverIntent({
    over: function(){},
    out: function(){},
    timeout: 1000 // in miliseconds
});

所以这就是它的样子：JSFIDDLE，即使有时候在调用out函数之前要花很长时间，所以用你案例的最佳用法来定义它

使用jQuery扩展菜单 - 动画

2 个答案: