Using the jQuery UI accordion menu (navigation: true) with named binding targets for menu items, that is, menu items refer to named anchors on the current page.
The accordion works fine with the highlighting of a click on a menu item if you go to another page, but if the menu item refers to a named anchor on the current page, it does not change the selection / selection of the menu when pressed (although the link calls to scroll to the desired anchor, as expected) . The location hash is updated using bindings, but the menu item with a click is not highlighted.
Do nothing unusual. The following is an example accordion menu that demonstrates the problem. When a menu item is pressed, the accordion does not highlight this menu item to reflect that it is the current menu item.
I want it to highlight a menu item when it clicks, and the expected accordion works that way. How can I make it do this?
Is the accordion widget only designed to update / search / highlight the current menu item via a hash of the URL when the accordion is initialized when the page loads?
FYI I'm new to all of this. Be gentle;) TIA
<ul id="navigation"> <li> <a class="head">Menu 1</a> <ul> <li><a href="#anchor1">Sub-topic 1</a></li> <li><a href="#anchor2">Sub-topic 2</a></li> <li><a href="#anchor3">Sub-topic 3</a></li> </ul> </li> <li> <a class="head">Menu 2</a> <ul> <li><a href="#anchor1">Sub-topic 1</a></li> <li><a href="#anchor2">Sub-topic 2</a></li> <li><a href="#anchor3">Sub-topic 3</a></li> </ul> </li> </ul>
[Added on 11-17-2010] Nothing special in my libraries or accordion code:
jquery-1.4.2.min.js chili-1.7.pack.js jquery.easing.js jquery.dimensions.js jquery.accordion.js jQuery().ready(function(){ $('#navigation').accordion({ collapsible: true, active: 0, header: '.head', navigation: true, autoheight: true, animated: 'easeslide' }); });
This is all due to the way the lib accordion handles named anchors.