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>
运行代码
复制代码
另存代码
提示:您可以先修改部分代码再运行
查看全文
相关阅读:
VS.NET 2005 常用的快捷键
路径,文件,目录,I/O常见操作汇总
c#中cookies的存取操作
ASP.NET AJAX入门系列(1):概述
RS2008中控件ID冲突问题
[书名]各种计算机语言的经典书籍
终于把课件做好了~~
还是两个数的交换问题
自制简易图片尺寸调整工具[源]
被点名了~~~[游戏]
原文地址:https://www.cnblogs.com/liuzhuqing/p/7480656.html
最新文章
NHibernate3.3的数据模型用Json.net4.5序列化
spring.net 发布 webservice的一点心得
.net在同一个项目中要引用两种不同版本的dll(dll hell)的解决办法
NHibernate onetoone 关系的几点说明
利用fnd_flex_keyval包轻松获取关键性弹性域组合描述字段
AP 结帐
utl_file包的使用
Oracle 总帐模块会计业务周期
Oracle ERP系统月结与年结流程探讨
fnd_profile.value 初始化等
热门文章
EBS中的OPP服务
Report Build 初始化报表的应用用户
AR/AP 借项通知单和贷项通知单的区别
SWR的总结
[推荐]MIME类型收集
30岁前男人需要完成的事
ASP正则表达式对象 New RegExp
[转] 关于ASP.NET页面打印技术的总结
净化你的心灵
ASP.NET AJAX入门系列
Copyright © 2011-2022 走看看