刚学jquery没多久，先写个树型菜单，实现方法很简单，兼容很好。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>tree menu</title> <script type="text/javascript" src="http://www.uedspace.com/zuopin/js/jquery.js"></script> <style type="text/css"> .select{ background-color:#ccc;} </style> </head> <body> <ul id="menu"> <li> <h3>菜单一</h3> <ul> <li>菜单一1</li> <li>菜单一1</li> <li>菜单一1</li> <li>菜单一1</li> <li>菜单一1</li> </ul> </li> <li> <h3>菜单二</h3> <ul> <li>菜单二1</li> <li>菜单二1</li> <li>菜单二1</li> <li>菜单二1</li> <li>菜单二1</li> </ul> </li> <li> <h3>菜单三</h3> <ul> <li>菜单三1</li> <li>菜单三1</li> <li>菜单三1</li> <li>菜单三1</li> <li>菜单三1</li> </ul> </li> <li> <h3>菜单四</h3> <ul> <li>菜单四1</li> <li>菜单四1</li> <li>菜单四1</li> <li>菜单四1</li> <li>菜单四1</li> </ul> </li> </ul> <script type="text/javascript"> $(function(){ var ul =$('#menu li').find('ul'); ul.hide(); var h3 = $('#menu li').find('h3'); h3.click(function(){ if($(this).next().is(':hidden')){ ul.hide(); $(this).next().show(); }else{ $(this).next().hide(); } }) }) /* $(function(){ $('#menu li').find('ul').hide(); $('#menu li ').find('h3').bind('click',function(){ if($(this).next().is(':visible')){ $(this).next().hide(); }else{ $('#menu li').find('ul').hide(); $(this).next().show(); } }) }); */ </script> </body> </html>
提示：你可以先修改部分代码再运行。