javascript - jQuery 菜单用户界面。展开二级子菜单时自动展开三级子菜单

Question

我正在尝试让第 3 级菜单在其第 1 级父菜单展开时自动展开。因此，在我的示例中，当您将鼠标悬停在第一个项目上时，我希望显示项目 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 中，这段代码实际上因某些空元素访问而失败...这是 jquery 中的错误。我现在找不到错误单，但我看到它已经解决了，在下一个版本中就可以了。