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>
运行代码
复制代码
另存代码
提示:您可以先修改部分代码再运行
查看全文
相关阅读:
MySQL的四种事务隔离级别
线上CPU飚高(死循环,死锁...)
Tomcat7 调优及 JVM 参数优化
tomcat8.5配置高并发
Tomcat 8.5 基于 Apache Portable Runtime(APR)库性能优化
android 高德地图 轨迹平滑处理
android高德地图绘制线 渐变处理
按下home键,重新打开,应用重启
小米9屏下指纹判断
android 9.0以上charles https抓包
原文地址:https://www.cnblogs.com/liuzhuqing/p/7480657.html
最新文章
TensorFlow 源代码初读感受
人人都要学一点深度学习(1)- 为什么我们需要它
开源的那些事儿 (一)- 如何看待开源
程序员的选择
从Hadoop Summit 2016看大数据行业与Hadoop的发展
小马哥Python知识体系
图说十大数据挖掘算法(一)K最近邻算法
2019年所有人必须要掌握的一个技能
机器学习中的数学:线性代数之矩阵(能力工场小马哥)
关于SimHash去重原理的理解(能力工场小马哥)
热门文章
主成分分析原理解释(能力工场小马哥)
通过Shell命令与JavaAPI读取ElasticSearch数据 (能力工场小马哥)
ElasticSearch异常归纳(能力工场小马哥)
PCA的数学原理
如何理解洛必达法则
Java 并发工具包 java.util.concurrent 用户指南
MySQL性能优化总结
MySql优化相关总结
实现一个java锁
敏感词过滤算法:前缀树算法
Copyright © 2011-2022 走看看