apply class to parent li in nestled order lists
I am following this article http://docs.jquery.com/Tutorials:Auto-Selecting_Navigation
I am able to successfully add a
class
to the active page li menu item but does anyone know how to modify or add to this
script
so that any parent menu li items also get the
active
class?
I would like to avoid having to add ID's as the menu items will be changing alot
My menus have three levels max
here is my menu structure and
code
so far
* Menu *
<ul class="topLevel">
<li><a href="/home.html">one</a></li>
<li><a href="/main-two.html">two</a></li>
<li><a href="/main-three.html">three</a></li>
<li><a href="/four/index.cfm">four (parent)</a>
<ul class="secondLevel">
<li><a href="/four/one.html">four-one</a></li>
<li><a href="/four/two.html">four-two</a></li>
<li><a href="/four/three.html">four-three</a></li>
<li><a href="/four/four.html">four-four</a></li>
<li><a href="/four/five/index.cfm">four-five (parent)</a>
<ul class="thirdLevel">
<li><a href="/four/five/one.html">four-five-one</a></li>
<li><a href="/four/five/two.html">four-five-two</a></li>
<li><a href="/four/five/three.html">four-five-three</a></li>
<li><a href="/four/five/four.html">four-five-four</a></li>
<li><a href="/four/five/five.html">four-five-five</a></li>
</ul>
</li>
<li><a href="/four/five.html">four-five</a></li>
</ul>
</li>
<li><a href="main-five.html">five</a></li>
</ul>
$(function(){
var path = location.pathname.substring(1);
if ( path )
$('.topLevel a[href$="' + path + '"]').attr('class', 'underline');
});
which works on the current page li a
I thought I could go this route
$('.topLevel a[href$="' + path + '"]').attr('class', 'underline').parent().attr('class', 'underline');
but it does not seem to work any ideas?
a working example can be found here
http://www.whistlerwebandprint.com/home.html