<!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. 一些linux嵌入式资源下载地址

    linux内核源代码情景分析 非扫描版 上下册合订版 字清楚 带书签 1575页 pdfhttp://download.csdn.net/source/2002579***************** ...

  2. RMQ（Range Minimum Query）问题（转）

    问题描述 RMQ问题是求给定区间中的最值问题.对于长度为n的数列A,回答若干查询RMQ(A, i, j).返回数组A中下标在[i,j]里的最小值的下标. 比如数列 5,8,1,3,6,4,9,5,7 ...

  3. Lightoj 1068(数位DP)

    求一段区间中被k整除,各个位数相加之和被k整除的数的个数. 这不是重点,重点是k太大了,最大值有10000,所以不能直接开那么大的数组. 仔细分析一下可以发现,由于数最大是2的31次方(2147483 ...

  4. UI：SQL语句

    sql语句一般不区分大小写,但是我们默认的是关键字要大写是一种好的习惯,比如SELECT 等效于 select.,但是表中的字段,属性区分大小写.Oracle 数据库是一种区分大小写的. Sql语句命 ...

  5. Ubuntu 环境变量及 ADB 配置 （转载）

    转自:http://blog.csdn.net/ithomer/article/details/7307449 同Windows一样,Ubuntu Linux系统包含两类环境变量:系统环境变量和用户环 ...

  6. Ubuntu12.04中新的快捷键（转载）

    转自:http://blog.51osos.com/linuxnews/ubuntu12-04%E4%B8%AD%E6%96%B0%E7%9A%84%E5%BF%AB%E6%8D%B7%E9%94%A ...

  7. 切换或者用户登录时 出现 显示 -bash-4.2$ 问题 的解决

    集群的普通用户在登录用户或者切换用户时,出现 -bash-4.2$ 的状态: [goldwind@TR-OS-DB 9.4]#su postgres bash-4.2$ 原因:在linux下通过use ...

  8. bzoj 1614: [Usaco2007 Jan]Telephone Lines架设电话线【二分+spfa】

    二分答案,然后把边权大于二分值的的边赋值为1,其他边赋值为0,然后跑spfa最短路看是否满足小于等于k条边在最短路上 #include<iostream> #include<cstd ...

  9. bzoj 3944: Sum【莫比乌斯函数+欧拉函数+杜教筛】

    一道杜教筛的板子题. 两个都是积性函数,所以做法是一样的.以mu为例,设\( f(n)=\sum_{d|n}\mu(d) g(n)=\sum_{i=1}^{n}f(i) s(n)=\sum_{i=1} ...

  10. SELinux的启动和关闭

    1.SELinux简介 SELinux是Security Enhanced Linux的缩写,字面上的意思就是安全强化的Linux,它是由美国国家安全局 (NSA) 开发的,整合到Linux核心的一个 ...