会员
商店
众包
新闻
博问
闪存
赞助商
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
博客园
首页
新随笔
联系
订阅
管理
Jq-简单伸缩菜单
<!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> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script> <script> $(document).ready(function() { $('dt:first').css('border-top-width','0'); $('dd:not(:first)').hide(); //第一个展开 //$('dd').hide(); //第一个不展开 $('dt').click(function() { $('dd').slideUp(500); $(this).next().slideDown(500); }); }); </script> <style type="text/css"> * { margin:0; padding:0; } dl { width:300px; font-size:12px; text-align:center; margin:10px; border:1px #ADCD3C solid; } dt { cursor:pointer; font-size:14px; font-weight:bold; line-height:30px; background:#F0FBEB; } dt { border-top:1px #dedede solid; } ul { list-style-type:none; } li { background:#F2FDDB; line-height:25px; border-top:1px #9BDF70 solid; } .line { border-top:1px #dedede solid; } </style> </head> <body> <dl> <dt>第一章</dt> <dd> <ul> <li>我的祖国</li> <li>我的祖国</li> <li>我的祖国</li> <li>我的祖国</li> </ul> </dd> <dt>第二章</dt> <dd> <ul> <li>小英雄喜洋洋</li> <li>小英雄喜洋洋</li> <li>小英雄喜洋洋</li> <li>小英雄喜洋洋</li> </ul> </dd> <dt>第三章</dt> <dd> <ul> <li>唐诗宋词赏析</li> <li>唐诗宋词赏析</li> <li>唐诗宋词赏析</li> <li>唐诗宋词赏析</li> </ul> </dd> </dl> </body> </html>
运行代码
posted @
2010-07-01 10:07
豪情
阅读(
1080
) 评论(
0
)
编辑
收藏
举报
努力加载评论中...
刷新页面
返回顶部
【推荐】100%开源！大型工业跨平台软件C++源码提供，建模，组态！
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
公告
点击右上角即可分享
AI IDE Trae
【推荐】还在用 ECharts 开发大屏？试试这款永久免费的开源 BI 工具！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步