Jq简单伸缩菜单

zoukankan html css js c++ java

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 { 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>

查看全文

相关阅读:
DevC++手动开栈
 二分图|网络流建模复习
 C++常用数据类型范围
 卡常剪贴板
 AcWing 2425. 奇怪的计算器
 AcWing 153. 双栈排序震惊！2^n 过 1000
AcWing 352. 闇の連鎖
 AcWing 246. 区间最大公约数
 AcWing 221. 龙哥的问题
 AcWing 381. 有线电视网络

原文地址：https://www.cnblogs.com/jikey/p/1768867.html