如何使活动的jQuery手风琴菜单？

Question

I have jQuery simple vertical accordion menu.

Javascript:

 $(document).ready(function () { $('#nav > li > a').click(function(){ if ($(this).attr('class') != 'active'){ $('#nav li ul').slideUp(); $(this).next().slideToggle(); $('#nav li a').removeClass('active'); $(this).addClass('active'); } else { $('#nav li ul').slideUp(); $('#nav li a').removeClass('active'); } }); }); 

 #nav li ul { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="nav"> <li><a href="#">Item 1</a> <ul> <li><a href="#">Sub-Item 1 a</a></li> <li><a href="#">Sub-Item 1 b</a></li> <li><a href="#">Sub-Item 1 c</a></li> </ul> </li> <li><a href="#">Item 2</a> <ul> <li><a href="#">Sub-Item 2 a</a></li> <li><a href="#">Sub-Item 2 b</a></li> </ul> </li> <li><a href="#">Item 3</a> <ul> <li><a href="#">Sub-Item 2 a</a></li> <li><a href="#">Sub-Item 2 b</a></li> </ul> </li> <li><a href="#">Item 4</a> <ul> <li><a href="#">Sub-Item 2 a</a></li> <li><a href="#">Sub-Item 2 b</a></li> </ul> </li> </ul> 

i want have class showmenu , and if i add this class for "Item 3" this menu will be open automatically when page load. how can do this

Answer 1

Just add slideDown() to the ul which is inside li with showmenu class

 $('.showmenu ul').slideDown();

 $(document).ready(function () { $('.showmenu ul').slideDown(); $('#nav > li > a').click(function(){ if ($(this).attr('class') != 'active'){ $('#nav li ul').slideUp(); $(this).next().slideToggle(); $('#nav li a').removeClass('active'); $(this).addClass('active'); } else { $('#nav li ul').slideUp(); $('#nav li a').removeClass('active'); } }); }); 

 #nav li ul { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="nav"> <li><a href="#">Item 1</a> <ul> <li><a href="#">Sub-Item 1 a</a></li> <li><a href="#">Sub-Item 1 b</a></li> <li><a href="#">Sub-Item 1 c</a></li> </ul> </li> <li><a href="#">Item 2</a> <ul> <li><a href="#">Sub-Item 2 a</a></li> <li><a href="#">Sub-Item 2 b</a></li> </ul> </li> <li class="showmenu"><a href="#">Item 3</a> <ul> <li><a href="#">Sub-Item 2 a</a></li> <li><a href="#">Sub-Item 2 b</a></li> </ul> </li> <li><a href="#">Item 4</a> <ul> <li><a href="#">Sub-Item 2 a</a></li> <li><a href="#">Sub-Item 2 b</a></li> </ul> </li> </ul>