jQuery Navigation - Help Needed
I am working on a site with a fairly large accordion style navigation (it does not use the accordion UI).
There are four sub-menu sections that toggle open when clicked. I have the active link highlighted. The one remaining step is to keep the current active sub-menu open when on a page within the sub-menu. I can keep it open when I am working with static pages, but on this site the navigation is an includes file and therefore I need some help working out a dynamic way to keep those sections open.
Here is the code I am using:
<script type="text/javascript">
$(function(){
$('ul#menu3 ul').hide();
$('ul#menu3 > li > a.drop').click(function(){
$(this).parent().children('ul').toggle("slow");
return false;
});
});
</script>
Basically w开发者_JAVA技巧hat I need is some way to apply a class to the active group so that it will show. Any help would be greatly appreciated.
Thanks.
I would put the submenu animation in a function, so to call the submenu in, you use on your a href
onclick="showSubMenu('id')"
That function would handle the sliding in. Then once clicked onto a page that requires a submenu to appear, simply add to the end of your page a small
<script>document.ready(function() {showSubMenu('parent-id')});</script>
Hope this helps.
C
You probably need to apply the class dynamically either as a variable or on the element it self. e.g.
var page = 'ul#menu3';
Then use this variable to trigger the initial state e.g.
$('#ul#menu3').show();
This would would need to run before all the other javascript relating to the dropdowns
This is what I ended up using to solve the problem:
$(function(){
$('#mainContentTabs').tabs();
$('#subContentTabBoxes').tabs();
$('.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();
$('li.quicklinks ul').show();
});
Thanks.
精彩评论