runxinzhi.com
首页
百度搜索
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>
运行代码
复制代码
另存代码
提示:您可以先修改部分代码再运行
相关阅读:
Linux 系统挂载数据盘
Apache Rewrite规则笔记
linux fdisk分区笔记
阿里云linux配置
linux 下安装mysql相关笔记
ShopNC目录结构分析
今天开始出发做ShopNC
svn相关笔记
linux学习笔记-不定时更新
Oracle EBS Java Applet报错:找不到类
原文地址:https://www.cnblogs.com/liuzhuqing/p/7480656.html
最新文章
循环生成sql文件。
本图片处理类功能非常之强大可以实现几乎所有WEB开发中对图像的处理功能都集成了,包括有缩放图像、切割图像、图像类型转换、彩色转黑白、文字水印、图片水印等功能
循环编辑文件夹IBMEmptorisSSM-WSDL 下面的所有的wsdl文件到 d盘的wsdlSource下
js实现发送短信验证码后的倒计时功能(无视页面刷新)
读取input:file的路径并显示本地图片的方法
Communication 交流
收货地址表结构 以及创建修改流程
java获取获得Timestamp类型的当前系统时间。以及java.util.date 、java.sql.Date之间的转换
poi jar包的作用
简单的bat命令去获取wsdl的源码
热门文章
(转)Android网络命令
Android WebView代理设置方法(API10~21适用)
PagerAdapter的notifyDataSetChanged无效解决方法
(转)Android Support Percent百分比布局
(转)使用getevent监听Android输入设备文件
(转)Windows驱动编程基础教程
常用设备类别及其GUID
Android屏幕像素密度适配详解
利用ddmlib 实现 PC端与android手机端adb forword socket通信(转)
阿里云数据盘扩容
Copyright © 2020-2023
润新知