如何使活動的jQuery手風琴菜單？

Question

我有jQuery簡單的垂直手風琴菜單。

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> 

我想要有showmenu類，並且如果我為“ Item 3”添加此類，則在頁面加載時此菜單將自動打開。 該怎么做

Answer 1

只需在showmenu類的li內部的ul添加slideDown()

 $('.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>