zoukankan
html css js c++ java
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"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>jquery 收缩展开效果</title> <script type="text/javascript" src="http://www.mengdongli.com/skins/2012/js/jquery1.3.2.js"></script> <style> .text{line-height:22px;padding:0 6px;color:#666;} .box h1{padding-left:10px;height:22px;line-height:22px;background:#f1f1f1;font-weight:bold;} .box{position:relative;border:1px solid #e7e7e7;} </style> </head> <body> <script type="text/javascript"> // 收缩展开效果 $(document).ready(function(){ // $(".box h1").toggle(function(){ // $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); // },function(){ //$(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow"); //}); $("div.text").hide();//默认隐藏div,或者在样式表中添加.text{display:none},推荐使用后者 $(".box h1").click(function(){ $(this).next(".text").slideToggle("slow"); }) }); </script> <!-- 收缩展开效果 --> <div class="box"> <h1>收缩展开效果</h1> <div class="text"> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> </div> </div> <br /> <div class="box"> <h1>收缩展开效果</h1> <div class="text"> 1<br /> 2<br /> </div> </div> <br> 第一次运行请刷新一下页面。 </body> </html>
运行代码
复制代码
另存代码
提示:您可以先修改部分代码再运行
查看全文
相关阅读:
cidaemon.exe过程cpu入住率和关闭cidaemon.exe加工方法
.net 一些常用的工具来破解
关于加密和解密的设计思路
oncopy和onpaste
来迁移数据管道
使用JSP实现商场购物车模块
2014在辛星Javascript口译科
Lua学习 1) —— Android呼叫变量值和分配
HttpSQS
手机后端开发
原文地址:https://www.cnblogs.com/liuzhuqing/p/7480657.html
最新文章
gem5 设定checkpiont以及从checkpoint开始运行
Uml类图
mongodb
POJ 2002 点hash
【网络协议】TCP交互数据流和数据流成块
HDU 4891 The Great Pan (模拟)
30第二建筑Github Page
Photon + Unity3D 在线游戏开发 学习笔记(两)
Volley该框架使用了大量的请求图片
第8本:《追寻生命的意义》
热门文章
第6本:《The Hunger Games》
第5本:《乔纳森传》
第4本:程序员修炼之道-从小工到专家(第七、八章)
第3本:Visual Studio程序员箴言
第2本:《信息简史》
第1本:《赤裸裸的统计学》
国庆计划
java编程规范大全
配置管理系统和整体的变化对系统有什么区别和联系
C++ Primer 学习笔记_40_STL实践与分析(14)--概要、先来看看算法【上】
Copyright © 2011-2022 走看看