船长 发表于 2009-02-19 10:29 | 分类：jQuery | 阅读数：5,636 次
又一款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>DL Demo</title> <script src="http://www.songlecn.com/wp-content/files/jquery-1.2.6.pack.js"></script> <script> $(document).ready(function(){ $("dd:not(:first)").hide(); $("dt a").click(function(){ $("dd:visible").slideUp("slow"); $(this).parent().next().slideDown("slow"); return false; }); }); </script> <style> body { font-family: Arial; font-size: 16px; } dl { width: 300px; } dl,dd { margin: 0; } dt { background: #F39; font-size: 18px; padding: 5px; margin: 2px; } dt a { color: #FFF; } dd a { color: #000; } ul { list-style: none; padding: 5px; } </style> </head> <body> <span style="color:red">*请再次刷新页面查看效果</span> <dl> <dt><a href="#">jQuery</a></dt> <dd> <ul> <li><a href="#">Download</a></li> <li><a href="#">Documentation</a></li> <li><a href="#">Blog</a></li> </ul> </dd> <dt><a href="#">Community</a></dt> <dd> <ul> <li><a href="#">Mailing List</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Demos</a></li> <li><a href="#">Plugins</a></li> </ul> </dd> <dt><a href="#">Development</a></dt> <dd> <ul> <li><a href="#">Source Code</a></li> <li><a href="#">Bug Tracking</a></li> <li><a href="#">Recent Changes</a></li> </ul> </dd> </dl> </body> </html>
提示：你可以先修改部分代码再运行。
您的网名： * 必填
电子邮件： * 绝不会泄露
个人主页：
评论内容：
(Ctrl+Enter快捷回复)
web集结号致力于
