Javascript 对角线鼠标悬停，带有3级深度jquery下拉菜单

首先，我将要解释的所有内容都在这把小提琴中演示：

考虑一个深入3层的导航选项卡；第一级选项卡，第二级：下拉列表。第三级打开到侧面的第二个下拉列表。这是一个视觉：

。它的简化HTML如下所示：

<ul id = "maintabs">
    <li>child 1</li>
    <li>child 2
        <ul>
            <li>grand child 1</li>
            <li>grand child 2
                <ul>
                    <li>great grand child 1</li>
                    <li>great grand child 2</li>
                    <li>great grand child 3</li>
                </ul>                
            </li>
        </ul>    
    </li>
</ul>

所有这些都非常有效，但是用户交互可以提高导航到第三级项目的效率。假设您想导航到西瓜>绿色>真正的深绿色。因此，您可以将鼠标悬停在“西瓜”上，然后出现下拉列表，然后将鼠标悬停在“绿色”上，然后出现侧面下拉列表。然后水平悬停从“绿色”到“深色”，然后垂直悬停到“真正的深绿色”。这是一个视觉。鼠标移动通过红色箭头显示：

但是，如果用户希望从“绿色”直接对角转到“真正的深绿色”，而不首先水平滚动，该怎么办？以下是所需行为的视觉效果：

这会导致鼠标离开“绿色”，因此菜单会折叠并完全消失。那么，如何解决这个问题呢

我试着增加mouseleave的超时时间，但是另一个问题出现了：如果你想在去那里的路上从绿色直接转到“真正的深绿色”，你会在“红色”和“紫色”上盘旋。如果“红色”也有孩子呢？然后鼠标从“绿色”移到“红色”上，也会显示“红色”的子菜单，然后你会同时打开超过1个三级菜单，这看起来很糟糕

希望所有这些都有意义

---

谢谢。

你考虑过用门垫代替吗？使用多层导航不是一个明智的想法，它有许多可用性问题

这是你想要的理想行为。在mouseout中，您希望该元素消失，否则它将继续存在

查看ibm网站上的门垫菜单，我相信您会喜欢它的

---

这解决了我的问题

这是一个完全不同的结构。我主要感兴趣的是如何使我投入的工作发挥作用。

$("ul#maintabs li").hover(function () {
    $('ul:eq(0)', this).stop(true, true).animate({
        height: 'show',
        opacity: 'show'
    }, 150);
}, function () {
    $('ul:eq(0)', this).animate({
        height: 'hide',
        opacity: 'hide'
    }, 150);
})

$(document).ready(function() {
    $("ul.nav li").hover(function() { //When trigger is hovered...
        $(this).children("ul.sub").stop(true).slideDown();
    }, function() {
        $(this).children("ul.sub").stop(true).slideUp();
    });
});