Manually focusing a Menu item
Hello fellow jQuery users :)
I recently had the need to manually focus a given menu item, as my end users request the menu to highlight the menu item corresponding to the current screen. There are of course many ways to do that, but supposedly, the method focus seemed a good bet for this.
Now this is where my knowledge of jQuery and JS in general failed me. I reproduced my troubles on this jsfiddle (EDIT : see below for amended link)
Basically :
- when trying to focus a terminal element on the first level of the menu, it works as intented
- when trying to focus an item which is a submenu, an exception is raised (event is null)
- when trying to focus a terminal element on a submenu, there is no exception, but I'd like the whole path to the terminal element to be highligher (e.g in this jsfiddle : Submenu 1 and Leaf 2.1 should both be highlighted)
I'm not sure if the exception in the second case is a bug or if the event is truly necessary. But in any case, I definitely seem to have trouble to highlight what I want.
For the jsfiddle, I used buttons to simplify the test, but this causes the third case (leaf in submenu) to not highlight anything. When "manually" focused on window.load, the item "Submenu 1" is highlighted, but not "Leaf 2.1".
Can anyone give me any lead on this matter ?
Thanks !
EDIT : there was a minor mistake on the styling inside the jsfiddle, and I renamed things to make things clearer (hopefully). The last revision should be correct.