Jquery手风琴菜单（3级）怎么样？

我有这个jquery代码：

$(document).ready(function(){ $("#accordion2 h3").click(function(){ //slide up all the link lists $("#accordion2 ul ul").slideUp(); //slide down the link list below the h3 clicked - only if its closed if(!$(this).next().is(":visible")) { $(this).next().slideDown(); } }) }) 

和HTML：

 
 
 
 
Articles
 
 
Nature 
 
Wild life
 
Flowers
 
Animals
 
 
 
Earth
 
Space
 
Ocean
 
Land
 
 
 
  

我如何修改jQuery代码，以便用户可以滑动“自然”及其内容？ 3个三级菜单。

Answer 1

我猜这就是你追求的？ 如果没有，那么请澄清你的问题。

 $(document).ready(function(){ $("#accordion2 h3").click(function(){ $(this).next().slideToggle(); }) $("#accordion2 ul ul li a").click(function(){ $(this).next().slideToggle(); }) }) 

工作演示

Answer 2

多级手风琴： JSFiddle

HTML

 
 
Sub item A 
 
Sub Sub item A 
 
sub sub sub item a 
 
sub sub sub sub item a
 
sub sub sub sub item b
 
 
 
sub sub sub item b
 
sub sub sub item c
 
 
sub sub item b
 
sub sub item c
 
 
 
Sub item b 
 
sub sub item e
 
sub sub item f
 
sub sub item g
 
 
  

JavaScript的

 function initMenu() { $(".sub-menu").hide(); $(".current_page_item .sub-menu").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'))) { console.log(checkElement.parentsUntil('#menu')); $('#menu ul:visible').not(checkElement.parentsUntil('#menu')).slideUp('normal'); checkElement.slideDown('normal'); return false; } }); } $(function() { initMenu(); });