<!DOCTYPE html> <html> <head> <title> New Document </title> <meta charset="utf-8" /> <style> h2 {margin: 0; padding: 0;} #ul1 ul {display: none;} #ul1 .next {color: red;} </style> <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script> <script> $(function(){ $('#ul1 li').find('h2').click(function(){ var oUl = $(this).parent().find('ul')[0]; var aUl = $(this).parent().siblings('li').find('ul'); $(aUl).slideUp(); $(aUl).not(oUl).attr('bClk',false); if($(oUl).attr('bClk')=='true'){ $(oUl).slideUp().attr('bClk',false); $(oUl).find('ul').slideUp().attr('bClk',false); }else{ $(oUl).slideDown().attr('bClk',true); } }) }); </script> </head> <body> <ul id="ul1"> <li><h2>1111</h2></li> <li><h2 class="next">2222</h2> <ul> <li><h2 class="next">aaaa</h2> <ul> <li><h2>aaaa</h2></li> <li><h2>bbbb</h2></li> <li><h2>cccc</h2></li> <li><h2>dddd</h2></li> </ul> </li> <li><h2 class="next">aaaa</h2> <ul> <li><h2>aaaa</h2></li> <li><h2 class="next">bbbb</h2> <ul> <li><h2>aaaa</h2></li> <li><h2>bbbb</h2></li> <li><h2>cccc</h2></li> <li><h2>dddd</h2></li> </ul> </li> <li><h2 class="next">cccc</h2> <ul> <li><h2>aaaa</h2></li> <li><h2>bbbb</h2></li> <li><h2>cccc</h2></li> <li><h2>dddd</h2></li> </ul> </li> <li><h2>dddd</h2></li> </ul> </li> <li><h2>cccc</h2></li> <li><h2>dddd</h2></li> </ul> </li> <li><h2 class="next">3333</h2> <ul> <li><h2 class="next">aaaa</h2> <ul> <li><h2>aaaa</h2></li> <li><h2>bbbb</h2></li> <li><h2>cccc</h2></li> <li><h2>dddd</h2></li> </ul> </li> <li><h2 class="next">aaaa</h2> <ul> <li><h2>aaaa</h2></li> <li><h2>bbbb</h2></li> <li><h2>cccc</h2></li> <li><h2>dddd</h2></li> </ul> </li> <li><h2>cccc</h2></li> <li><h2>dddd</h2></li> </ul> </li> <li><h2>4444</h2> </li> </ul> </body> </html>
来源：http://bbs.miaov.com/forum.php?mod=viewthread&tid=6112&page=1#pid16332