jQuery Navigation Assistance Needed
I have a jQuery based accordion style navigation that I am trying to modify.
It uses this code:
$('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
return false;
});
I need to be able to keep it open to the section the active page is on. I can highlight the active link with CSS, but could use some good advice for keep it open to the active section.
The navigation is as follows:
<ul>
<li><a href="#" class="drop">Products</a>
<ul>
<li><a href="printing-newproducts.html">New Products</a></li>
<li><a href="printing-inksystems.html">Ink Systems</a></li>
<li><a href="printing-specialtyinks.html">Specialty Inks</a></li>
<li><a href="printing-environmentalinks.html">Environmental Inks</a></li>
<li><a href="printing-whiteplastisolinks.html">White Plastisol Inks</a></li>
<li><a href="printing-plastisolbases.html">Plastisol Bases</a></li>
<li><a href="printing-plastisolinkseries.html">Plastisol Ink Series</a></li>
<li><a href="printing-pvcfreewaterbase.html">Non-PVC Water-Based
System</a></li>
<li><a href="printing-modifersadditives.html">Modifiers & Additives</a></li>
<li><a href="printing-completeproductlisting.html">Complete Produc开发者_高级运维t
Listing</a></li>
</ul>
</li>
<li><a href="#" class="drop">Technical Information</a>
<ul>
<li><a href="printing-technicaldatasheets.html">Technical Data Sheets</a></li>
<li><a href="printing-msds.html">MSDS</a></li>
<li><a href="printing-onlinecolorcard.html">Online Color Card</a></li>
<li><a href="printing-mixingsystemsoftware.html">Mixing System Software</a></li>
<li><a href="printing-technicalbulletins.html">Technical Bulletins</a></li>
</ul>
</li>
<li><a href="#" class="drop">Tips & Techniques</a>
<ul>
<li><a href="printing-tradetips.html">Trade Tips</a></li>
<li><a href="printing-galleryoftechniques.html">Gallery of Techniques</a></li>
</ul>
</li>
</ul>
Note: I tried doing this with the jquery ui accordion, but I have a styling conflict with another accordion on the page among other things.
You can see it in action here: It is the sidebar navigation.
Thanks for any assistance.
I'd add a name or class to the 'li' elements so you can target the tab you want and call 'show()' on it in onready:
<ul>
<li name="products" ><a href="#" class="drop">Products</a>
...
</li>
<li name="technical-information"><a href="#" class="drop">Technical Information</a>
...
</li>
<li name="tips" ><a href="#" class="drop">Tips & Techniques</a>
...
</li>
</ul>
toggle() actually calls hide()/show(), so in onready call show() on the desired 'ul'
jQuery(window).ready(function() {
jQuery('li[name=products] ul').show();
});
loop over the uls instead of mass acting on them. If you can select an active li under the given ul, then don't shrink it.
Edit: I think this will give you close to what you're wanting, it is a little dry-coded so I'm not 100%, testing is advised.
$('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').each(function() {
if ($('li.active', this).length == 0) {
$(this).show("slow");
} else {
$(this).toggle("slow");
}
});
return false;
});
I got some really solid input from Bryan and jshali above and I wanted to post the final solution, which worked out quite nicely.
$('.interior #subContent > ul > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
return false;
});
$(window).ready(function() {
$('li.products ul').show();
$('li.technical ul').show();
$('li.tips ul').show();
});
Then I add the appropriate class to the list element. It was much easier to add the class than name:
<li class="products"><a href="#" class="drop">Products</a>
Works nicely thanks for the help.
精彩评论