jquery 菜单界面。二级子菜单展开时自动展开三级子菜单答案

【问题标题】：jquery menu ui. Auto expand 3rd level submenu when 2nd level submenu is expandedjquery 菜单界面。二级子菜单展开时自动展开三级子菜单
【发布时间】：2013-07-21 16:10:18
【问题描述】：

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

我已经尝试使用这个代码，它在 jsfiddle 中。

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

我还查看了 api 文档，但我并不清楚如何使用扩展或焦点。我不确定这是否是我想要使用的。

关注：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();
        });
    }
});

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-menu

【解决方案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 中，此代码实际上因某些空元素访问而失败...这是 jquery 中的一个错误。我现在找不到 bug 票，但我看到它已经解决，并且在下一个版本中会正常。

【讨论】：