jQuery 收缩展开效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jquery 收缩展开效果</title>
<script src="js/jquery-1.7.1.min.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");
});
});
</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 收缩展开效果的更多相关文章
- JS收缩展开效果
// 收缩展开效果 $(document).ready(function () { $(".box h2").toggle(function () { $(this).next(& ...
- 一款由jQuery实现的手风琴式相册图片展开效果
之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单.今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果.我们只需点击图片缩略图即可展开当前的图片,并将 ...
- jQuery 当前展开其他收缩 三级下拉菜单(转载)
jQuery可展开收缩三级下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <hea ...
- 右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
- jQuery操作之效果
jQuery操作之效果 效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style=& ...
- 第一百七十二节,jQuery,动画效果
jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一.显示.隐藏 jQuery 中显示方法为:. ...
- jquery垂直展开折叠手风琴二级菜单
摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...
- 实用js+css多级树形展开效果导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Dynamics CRM 修改Excel 最大导出记录限制及 最大上传文件限制
CRM默认的Excel最大导出记录是10000条,最大上传文件限制为5m. 这样的限制可以满足少量数据的批量更新,但是如果数据量比较大的话需要修改最大的导出记录限制,和上传文件的大小,网上有的是直接修 ...
- 在ubuntu18.0下安装qt4.7以及qt-creator安装过程中遇到的坑
最近的嵌入式Linux系统上要做课程设计= =要用贼老贼老的qt4.7,配环境踩坑都费了我1天时间.....所以记录下来,希望能给和我遇到相同问题的朋友一点帮助 apt-get install g++ ...
- YTU 2979: MathBook类--多态
2979: MathBook类--多态 时间限制: 1 Sec 内存限制: 128 MB 提交: 51 解决: 31 题目描述 Book类将自己的display函数设计为虚函数,从而通过父类指针调 ...
- POJ - 1470 Closest Common Ancestors(离线Tarjan算法)
1.输出测试用例中是最近公共祖先的节点,以及这个节点作为最近公共祖先的次数. 2.最近公共祖先,离线Tarjan算法 3. /* POJ 1470 给出一颗有向树,Q个查询 输出查询结果中每个点出现次 ...
- Python3列表、元组、字典、集合的方法
一.列表 温馨提示:对图片点右键——在新标签页中打开图片: 1.count() 定义:统计指定元素在列表中出现的次数并返回这个数.若指定的元素不存在则返回:0. 格式:[列表].count(“指定元素 ...
- VS2013Xml文件节点导航插件开发
一.功能描述 该插件的功能跟代码文件的导航功能类似,只是下拉框里的内容是元素的某一属性值,如图-1所示 图-1 当点击下拉框的选项后,会自动定位到该内容在xml文件的位置.此功能适用于xml文件内容较 ...
- mysql 联合2个列的数据 然后呈现出来
SELECT a.voyageNum,CONCAT(a.startDate,'~',a.endDate) AS 日期 FROM tchw_voyageoilcost a ,tchw_voyageoi ...
- bzoj 4785: [Zjoi2017]树状数组【树套树】
参考:https://www.cnblogs.com/ljh2000-jump/p/6686960.html 由于操作反过来了,所以显然树状数组维护后缀和,所以本来想查询(1,r)-(1,l-1),现 ...
- ionic2 中隐藏子页面tabs选项卡的三种方法
第一种: 隐藏全部子页面的tabs选项界面 找到app.module.ts文件 ,修改如下代码 imports: [ IonicModule.forRoot(MyApp,{ tabsHideOnSub ...
- Tech 助力Fin ,大数据风控系统赋能掌众金服!
胡亚海 首席技术官 CTO 北京航空航天大学 博士 深耕互联网领域近20年,先后任职于普天信息技术研究院.摩托罗拉.宇龙酷派.百度等知名企业,曾主导宇龙酷派公司全员从WinCE向Android转型 ...