Question

我正在尝试让第3级菜单在展开其第一级父级时自动展开。所以在我的示例中，当您将鼠标悬停在第一个项目上时，我希望项目1子菜单显示（正常情况下），然后是第一个子菜单。第2项也应该显示出来。 http://jsfiddle.net/n2Sxc/1/

我试过使用这个代码，它位于jsfiddle。

$("#main-nav li").mouseover(function () {
    $("#main-nav li ul li.first ul").show();
});

我也查看了api文档，但我不清楚如何使用expand或focus。我不确定这是否是我想要使用的。

焦点：http://api.jqueryui.com/menu/#event-focus

展开：http://api.jqueryui.com/menu/#method-expand

我在启动菜单时也试过这个

$('#main-nav').menu({
    focus: function( focus, ui ) {
        $("#main-nav li").hover(function (){
            $("#main-nav li ul li.first ul").show();
        });
    }
});

Answer 1

是的，关注和扩展是您所需要的。你不需要.show（）。

我不确定您的鼠标悬停是否会与正常的菜单事件处理冲突。

一开始，为了使至少一些简单的工作，下面的代码可以在菜单创建后自动扩展子菜单（为了简化选择器，你可以为你的菜单项添加id，我怀疑你的选择器是否选择了什么意）：

$("#main-nav").menu()
.menu("focus",null,$("#main-nav > li.first"))
.menu("expand")
.menu("focus",null,$("#main-nav > li.first > ul > li.first"))
.menu("expand");

在当前的jquery-ui-1.10.3 + jquery-2.0.3中，这段代码实际上失败了一些null元素访问...这是jquery中的一个bug。我现在找不到错误票，但我看到它已经解决了，并且在下一个版本中也没问题。

jquery菜单ui。扩展第2级子菜单时自动扩展第3级子菜单

1 个答案: