2

我试图让第三级菜单在其第一级父级扩展时自动扩展。因此,在我的示例中,当您将鼠标悬停在第一个项目上时,我希望显示项目 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();
        });
    }
});
4

1 回答 1

0

是的,专注和扩展是您所需要的。你不需要 .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 中的一个错误。我现在找不到错误票,但我看到它已经解决了,并且在下一个版本中会好的。

于 2013-12-18T02:45:52.387 回答