jquery menu ui. Auto expand 3rd level submenu when 2nd level submenu is expanded

Question

I am trying to get a 3rd level menu to automatically expand when its first level parent is expanded. So in the example I have, when you hover over the first item I want the Item 1 submenu to show (like normal) and then also the first submenu under that. Item 2 should also be showing. http://jsfiddle.net/n2Sxc/1/

I have tried to use this code, which is in the jsfiddle.

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

I have also looked at the api documentation, but it isn't really clear to me how to use expand or focus. I'm not sure if that's even what I want to use.

Focus: http://api.jqueryui.com/menu/#event-focus

Expand: http://api.jqueryui.com/menu/#method-expand

I have also tried this when initiating the menu

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

score 0 · Answer 1 · answered Dec 18 '13 at 02:45

Yes, focus and expand is what you need. You don't need .show().

I am not sure whether your mouseover will not conflict with the normal menu events handling.

For the beginning, to get at least something simple working, a code like below could automatically expand the submenus after menu creation (to simplify the selectors maybe you could add ids to your menu items, I have doubts whether your selectors select what intended):

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

In the current jquery-ui-1.10.3 + jquery-2.0.3 this code actually fails with some null element access... It is a bug in jquery. I can't find the bug ticket now but I saw that it was already resolved and will be ok in the next release.

jquery menu ui. Auto expand 3rd level submenu when 2nd level submenu is expanded

1 Answers1