I have nested lists that are are trigged by clicking on an anchor tag. I hardcode a specific sublist to display initially, which works. The problem is parent anchors that have sublists get two arrows, down and right, depending on if it's expanded or not, and I can't get the down arrow to display initially.
I am trying to add a class to the parent anchor tag based on the selected child sublist to expand. function initMenu() { $('ul.mainmenu ul').hide(); var expandDefaultMenu = $('ul.mainmenu ul:eq(0)'); //First submenu expanded expandDefaultMenu.parent('a').addClass('defaultopen'); // <-- Cannot get this to work. expandDefaultMenu.show(); $('ul.mainmenu li a').click( function() { var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { $(this).css('background-image','url(/images/templates2008/ arrowright.gif)'); checkElement.slideUp('normal'); return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $(this).css('background-image','url(/images/templates2008/ arrowdown.gif)'); $('ul.mainmenu ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; } } ); } $(document).ready(function() { initMenu(); });