用jquery写一个简略的菜单伸缩效果
用jquery写一个简单的菜单伸缩效果
<!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" xml:lang="en-us"> <head> <title>用jquery写一个菜单伸缩效果</title> <script src="http://code.jquery.com/jquery-1.1.3.1.pack.js"></script> <script> jQuery(document).ready(function(){ jQuery("dd:not(:first)").hide(); jQuery("dt a").click(function(){ jQuery("dd:visible").slideUp("slow"); jQuery(this).parent().next().slideDown("slow"); return false; }); }); </script> <style> body { font-family: Arial; font-size: 16px; margin: 0 auto; text-align: center; } dl,dt,dd,ul {margin: 0; padding: 0;} dl{margin-top: 150px;} dt { margin-top: 2px;} dt a {display: block; width: 300px; height: 30px; line-height: 30px;text-align: left; font-size: 18px; padding-left: 5px; color: #FFF; background: #73C5E5;} dd {width: 303px; border: 1px solid #73C5E5;} ul li{list-style: none; padding: 5px; text-align: left; } </style> </head> <body> <dl> <dt><a href="http://leotheme.cn/">jQuery</a></dt> <dd> <ul> <li><a href="http://leotheme.cn/">Download</a></li> <li><a href="http://leotheme.cn/">Documentation</a></li> <li><a href="http://leotheme.cn/">Blog</a></li> </ul> </dd> <dt><a href="http://leotheme.cn//discuss/">JavaScript</a></dt> <dd> <ul> <li><a href="http://leotheme.cn/">Mailing List</a></li> <li><a href="http://leotheme.cn/">Tutorials</a></li> <li><a href="http://leotheme.cn/">Demos</a></li> <li><a href="http://leotheme.cn/">Plugins</a></li> </ul> </dd> <dt><a href="http://leotheme.cn/">WordPress</a></dt> <dd> <ul> <li><a href="http://leotheme.cn/">Themes</a></li> <li><a href="http://leotheme.cn/">plugins</a></li> <li><a href="http://leotheme.cn/">languages</a></li> </ul> </dd> <dt><a href="http://leotheme.cn/">Themes</a></dt> <dd> <ul> <li><a href="http://leotheme.cn/">BlueSky</a></li> <li><a href="http://leotheme.cn/">Maxthon v2.0</a></li> <li><a href="http://leotheme.cn/">simple-line</a></li> </ul> </dd> </dl> </body> </html>