1

首先，我将要解释的一切都在这个小提琴中展示：

http://jsfiddle.net/rxaBH/3/

考虑一个深入 3 个级别的导航选项卡；第一级选项卡，第二级：下拉列表。3rd level 向侧面打开的第二个下拉列表。这是一个视觉效果：

在此处输入图像描述

. 它的简化 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>

​我不会费心把 CSS 代码放在这里，因为它太长了，但可以在小提琴链接中找到。

这是基于鼠标悬停显示/隐藏菜单的 jQuery 代码：

$("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);
})

所有这一切都很好，但用户交互可以改善导航到第 3 级项目。假设您要导航到西瓜 > 绿色 > 真正的深绿色。所以你可以将鼠标悬停在“西瓜”上，然后出现下拉菜单，然后将鼠标悬停到“绿色”，然后出现侧面下拉菜单。然后从“绿色”水平悬停到“较暗”，然后垂直向下悬停到“真正深绿色”。这是一个视觉。鼠标移动由红色箭头表示：

在此处输入图像描述

但是如果用户想要从“绿色”直接斜向“深绿色”而不是先水平滚动怎么办？这是所需行为的视觉效果：

在此处输入图像描述

这会导致鼠标离开“绿色”，结果菜单折叠并完全消失。那么如何解决呢？

我尝试增加 mouseleave 的超时时间，但是出现了另一个问题：如果您想在途中从绿色直接变为“真正的深绿色”，那么您会将鼠标悬停在“红色”上，也可能会悬停在“紫色”上。如果“红”也有孩子呢？然后将鼠标从“绿色”移到“红色”上也会显示“红色”的子菜单，然后您将同时打开 1 个以上的 3 级菜单，这看起来很糟糕。

希望所有这些都是有道理的！

谢谢你。

4

2 回答 2

0 
$(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();
    });
});

这解决了我的问题

于 2020-11-13T06:15:12.423 回答
-1

您是否考虑过使用门垫？使用多层导航不是一个明智的想法，它存在许多可用性问题。

这就是您想要的理想行为。Onmouseout，您希望元素消失，否则它将持续存在。

检查 ibm 网站上的门垫菜单，我相信你会喜欢的。

http://www.ibm.com/us/en/

于 2012-08-03T18:10:02.013 回答