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>

查看全文

相关阅读:
【Java TCP/IP Socket】应用程序协议中消息的成帧与解析（含代码）
【Java TCP/IP Socket】UDP Socket（含代码）
【Java TCP/IP Socket】TCP Socket（含代码）
Java NIO —— Buffer（缓冲区）
java.nio.ByteBuffer 以及flip,clear及rewind区别
 Java文件IO操作应该抛弃File拥抱Paths和Files
Java网络编程之InetAddress和URL
Java enum的用法详解
 PAT Basic 1083 是否存在相等的差 (20 分)
PAT Basic 1082 射击比赛 (20 分)

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