可扩展菜单与jQuery -动画

Expandable menu with jQuery - animation

本文关键字：动画 jQuery 菜单 可扩展      更新时间：2023-09-26

我正在尝试编写一个菜单，扩展悬浮在子类别-所以只有一个子类别可以在一个时间展开。它看起来像这样(完全展开):

  • X
    • Y
      • Y.1
      • Y.2
    • Z
      • 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/

谢谢! !

如何使用hoverIntent jQuery Plugin中的对象为hoverIntent添加超时

$('.selector').hoverIntent({
    over: function(){},
    out: function(){},
    timeout: 1000 // in miliseconds
});
这是它的样子:JSFIDDLE，尽管有时out函数调用需要很长时间，所以根据您的情况定义它

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

这很棘手，但试着想象

当你的鼠标进入选项Y时，它的第三层菜单显示，现在当你把鼠标放在选项Z上时，Y的mouseout事件触发，它隐藏了第三层，因为选项Z的位置发生了变化，现在你的鼠标指针在主菜单之外#id="m2l0"它的mouseout事件触发并隐藏了Y和Z选项

相关文章：