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>
运行代码
复制代码
另存代码
提示:您可以先修改部分代码再运行
查看全文
相关阅读:
jQuery的动画以及扩展功能
yii2 redirect重定向
nvaicat mysql ssh 跳板机(堡垒机???)连接服务器
Linux下Redis的安装
深入理解PHP的运行模式
thinkphp5 如何监听sql?
thinkphp5 如何使用查询事件?
layui laydate is not defined
CSS 实现图片灰度效果 兼容各种浏览器
PHP基础学习----函数
原文地址:https://www.cnblogs.com/liuzhuqing/p/7480657.html
最新文章
nRF24L01无线介绍
libcmsisstm32f10x.h(298): error: #67: expected a "}"
libcmsisstm32f10x.h(298): error: #67: expected a "}"
STM32点亮LED
STM32点亮LED
STM32工程模版
STM32工程模版
KEIL仿真出现 EVALUATION MODE
KEIL仿真出现 EVALUATION MODE
STM32启动BOOT0 BOOT1设置方法
热门文章
python基础-time和datetime模块
方法中this指向的问题
封装dropdown模块(使用到之前写好的动画组件,封装下拉菜单)
显示层封装及实现与优化(无动画+css3动画+js动画)
下拉菜单项封装,使用图标字体实现
典型电商网站的站点导航的布局结构实现,及运用三种方式实现下拉效果
挂号平台首页开发(UI组件部分)
挂号平台首页开发(静态页面部分)
jSon和Ajax登录功能,ajax数据交互案例
AJAX优势、跨域方案及JSON数据格式和浏览器中JSON对象
Copyright © 2011-2022 走看看