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

Question

我正在使用一个简单的jQuery Accordian菜单。 但是我希望列表中的第二项默认为打开，而不是：first

如何才能做到这一点？

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();});

我也想知道是否可以使用选定的类来使其变得更加动态：

 <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

尝试$('#menu ul:eq(1)').show(); 而不是$('#menu ul:first').show(); 这将适用.show()到第二元件ul在元件#menu 。 如果没有HTML，将很难看出这是否是正确的解决方案。

为了使其显示给定.selected类的项之后的ul ，请更改$('#menu ul:eq(1)').show(); .selected 到$('#side_menu li > a.selected + ul').show(); ，只要.selected类始终应用于<a> 。 如果希望将其应用于<li>另一个同级元素，则将选择器更改为$('#side_menu li .selected + ul').show(); ，这更具通用性。