<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery二级树形菜单</title> <mce:style type="text/css"><!-- body{margin:50px;font-family:Arial, Helvetica, sans-serif;} ul{margin:0;padding:0;} li{list-style:none;} #menuTree{background-color:#e5e5e5;width:180px;} #menuTree h3{background-color:#aaa;margin:0;padding:4px;font-size:12px;cursor:pointer;border-bottom:solid 1px #999;} #menuTree ul{margin:6px 12px;font-size:11px;} #menuTree div{display:none;} #menuTree h3.blue{background:#069;color:#fff;} --></mce:style><style type="text/css" mce_bogus="1">body{margin:50px;font-family:Arial, Helvetica, sans-serif;} ul{margin:0;padding:0;} li{list-style:none;} #menuTree{background-color:#e5e5e5;width:180px;} #menuTree h3{background-color:#aaa;margin:0;padding:4px;font-size:12px;cursor:pointer;border-bottom:solid 1px #999;} #menuTree ul{margin:6px 12px;font-size:11px;} #menuTree div{display:none;} #menuTree h3.blue{background:#069;color:#fff;}</style> <mce:script type="text/javascript" language="javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script type="text/javascript"><!-- $(document).ready(function(){ $("#menuTree h3").hover( function(){ $(this).addClass("blue"); }, function(){ $(this).removeClass("blue"); } ); $("#menuTree h3").toggle( function(){ $(this).next("div").show("slow"); }, function(){ $(this).next("div").hide("slow"); } ); }) // --></mce:script> </head> <body> <ul id="menuTree"> <li> <h3>mainMenu 1</h3> <div> <ul> <li><a href="#" mce_href="#">subMenu 1</a></li> <li><a href="#" mce_href="#">subMenu 2</a></li> <li><a href="#" mce_href="#">subMenu 3</a></li> </ul> </div> </li> <li> <h3>mainMenu 2</h3> <div> <ul> <li><a href="#" mce_href="#">subMenu 1</a></li> <li><a href="#" mce_href="#">subMenu 2</a></li> <li><a href="#" mce_href="#">subMenu 3</a></li> </ul> </div> </li> <li> <h3>mainMenu 3</h3> <div> <ul> <li><a href="#" mce_href="#">subMenu 1</a></li> <li><a href="#" mce_href="#">subMenu 2</a></li> <li><a href="#" mce_href="#">subMenu 3</a></li> </ul> </div> </li> </ul> </body> </html> 补充一句:toggle方法做的。。。