简单的JQuery手风琴菜单：默认打开第二个

Question

I am using a simple jquery accordian menu. But I want the second item in the list to be open by default rather than the :first

How can this be done?

function initMenu()
{
     $('#menu ul').hide();
     $('#menu ul:first').show();
     $('#menu li a').click(function()
     {
          var checkElement = $(this).next();
          if((checkElement.is('ul')) && (checkElement.is(':visible')))
          {
               return false;
          }
          if((checkElement.is('ul')) && (!checkElement.is(':visible')))
          {
               $('#menu ul:visible').slideUp('normal');
               checkElement.slideDown('normal');
               return false;
          }
     });
}
$(document).ready(function() {initMenu();});

I am also wondering if I could use a selected class to help make this more dynamic:

 <div id="work_menu"> <ul id="side_menu" class="nav_categories"> <li> <a href="celebratory-use">Celebratory Use</a> <ul> <li><a href="platters">Platters</a></li> <li><a href="celebratory-servers">Servers</a></li> </ul> </li> <li><a class="selected" href="daily-use">Daily Use</a> <ul> <li><a href="bowls">Bowls</a></li> <li><a href="butter-dishes">Butter Dishes</a></li> <li><a href="mugs">Mugs</a></li> </ul> </li> </ul> </div> 

Answer 1

Try $('#menu ul:eq(1)').show(); instead of $('#menu ul:first').show(); , this would apply .show() to the second element ul element in #menu . Without the HTML it is difficult to see if this is the proper solution.

To make it so that the ul coming after the item given the .selected class is shown, change $('#menu ul:eq(1)').show(); to $('#side_menu li > a.selected + ul').show(); , so long as the .selected class is always applied to an <a> . If you wish to apply it to another sibling element of the <li> , then change the selector to $('#side_menu li .selected + ul').show(); , which is a little more generalizable.