<!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>无标题文档</title> </head> <body> <style type="text/css"> *{ margin:0; padding:0; list-style:none;} body{ font:14px/25px arial; color:#000;} #slide{ width:200px; margin:10px auto; text-align:center;} #slide dt{ margin:5px 0 0; background:#ddd; font-weight:700; cursor:pointer;} #slide dd{ margin:5px 0;} #slide a{ display:block; color:#333; text-decoration:none;} #slide a:hover,#slide .onhere{ background:#eee; color:#b00;} </style> <dl id="slide"> <dt>目录一</dt> <dd> <ul> <li class="onhere"><a href="#">菜单1.1</a></li> <li><a href="#">菜单1.2</a></li> <li><a href="#">菜单1.3</a></li> </ul> </dd> <dt>目录二</dt> <dd> <ul> <li><a href="#">菜单2.1</a></li> <li><a href="#">菜单2.2</a></li> <li><a href="#">菜单2.3</a></li> </ul> </dd> <dt>目录三</dt> <dd> <ul> <li><a href="#">菜单3.1</a></li> <li><a href="#">菜单3.2</a></li> </ul> </dd> </dl> <script src="jquery-1.5.2.js"></script> <script> $(function () { $("#slide dd").hide(); $("#slide dd:first").show(); $("#slide dt").click(function () { if ($(this).next().is(":hidden")) { $("#slide dd").slideUp("fast"); $(this).next().slideDown("fast"); } return false; }); $("#slide li").click(function(){ $("#slide li").removeClass("onhere"); $(this).addClass("onhere"); }); }); </script> </body> </html>