runxinzhi.com
首页
百度搜索
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>
运行代码
相关阅读:
sonar6.7.2启动报错
linux 查看/修改jdk版本
idea一款颜值很高的theme
生成唯一UUID
连接池异常
手机网页点击后出现蓝色框
iScroll4中事件点击一次却触发两次解决方案
base.js
javascript与css3动画学习笔记
javascript对象学习笔记
原文地址：https://www.cnblogs.com/jikey/p/1768867.html
最新文章
python小坑
JMeter新建webservice接口测试计划
存储过程
autoit脚本在不同浏览器下执行的差异
数据库死锁
JMeter 安装 windows平台
EditPlus 格式化HTML JS CSS
Linux 中文设置
类加载机制
eclipse 工具在工作中实用方法
热门文章
一、网络相关知识
关于exe4j打包问题
System.arraycopy 和 Arrays.copyOf
JCS学习记录 Java Caching System
maven中引入oracle驱动报错Missing artifact com.oracle:ojdbc14:jar
c#中stringbuilder的使用
C#字符串string的常用使用方法
Spring AOP获取方法的参数名称和参数值
sonar服务搭建
整理c盘文件
Copyright © 2020-2023
润新知