<!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 收缩展开效果的更多相关文章

  1. JS收缩展开效果

    // 收缩展开效果 $(document).ready(function () { $(".box h2").toggle(function () { $(this).next(& ...

  2. 一款由jQuery实现的手风琴式相册图片展开效果

    之前我们有分享过很多jQuery手风琴样式的菜单,比如CSS3手风琴下拉菜单.今天要分享的jQuery手风琴效果很特别,它是手风琴样式的相册图片展开效果.我们只需点击图片缩略图即可展开当前的图片,并将 ...

  3. jQuery 当前展开其他收缩 三级下拉菜单（转载）

    jQuery可展开收缩三级下拉菜单 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  4. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  5. 右上角鼠标滑过展开收缩动画效果js代码的演示页面

    http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...

  6. jQuery操作之效果

    jQuery操作之效果 效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style=& ...

  7. 第一百七十二节，jQuery，动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...

  8. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

  9. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. codeforces 739E - Gosha is hunting

    这道题有三种做法,感受一下: 感觉到了歪果仁费尽脑汁想出来的神仙贪心脑洞题被中国人套路算法踩爆的凄凉...(我的名字是不是暴露了我的真实实力) ============================ ...

  2. HDU1176 免费馅饼 —— DP

    题目链接:http://acm.split.hdu.edu.cn/showproblem.php?pid=1176 免费馅饼 Time Limit: 2000/1000 MS (Java/Others ...

  3. JavaScript 图片广告自动与手动的切换

    ​1.代码 <html> <head>   <script type="text/javascript" src="jquery-1.8.j ...

  4. mac系统下如何删除银行安全插件

    要分类解决了,一般safair插件都是pkg包安装的 如果:1.制作者够良心,PKG安装包中植入了删除卸载功能,那就好办了,打开当时安装的pkg包,执行删除选项 2.没良心的,装了不好删的,我目前个人 ...

  5. Masonry 比例（multipliedBy）

    前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...

  6. [USACO16JAN]愤怒的奶牛Angry Cows

    传送门 一道神奇的DP………(鬼知道他为什么在tarjan里面) 一开始可能会考虑贪心或者什么其他神奇的算法,不过还是DP比较靠谱. 我们用f[i]表示摧毁所有i左侧的炸 药包最少需要的能量,用g[i ...

  7. python爬虫爬取腾讯招聘信息 （静态爬虫）

    环境: windows7,python3.4 代码:(亲测可正常执行) import requests from bs4 import BeautifulSoup from math import c ...

  8. python模拟登录的实现

    本文主要用python实现了对网站的模拟登录.通过自己构造post数据来用Python实现登录过程.   当你要模拟登录一个网站时,首先要搞清楚网站的登录处理细节(发了什么样的数据,给谁发等...). ...

  9. Class.getResourceAsStream()与ClassLoader.getResourceAsStream()获取资源时的路径说明

    Class.getResourceAsStream(): com.xusweeter.iot.ws.vodafone.config.VodafoneServiceConfig.class.getRes ...

  10. windows8.1专业版 关闭ie11总是已停止工作

    该问题通常原因: 1 系统重病毒: 2 系统和安装的软件不兼容导致. 解决方案: 1 杀毒更新至最新进行杀毒,仍未解决,重新安装系统: 2 目前身边人员多数属于该情况: 1 如安装了输入法.迅雷或其它 ...