jQuery实现DIV层收缩展开的方法


Posted in Javascript onFebruary 27, 2015

本文实例讲述了jQuery实现DIV层收缩展开的方法。分享给大家供大家参考。具体实现方法如下:

<!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>

<title>jQuery实现DIV层的收缩展开效果</title>

<script type="text/javascript" src="/images/jquery.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>

<font color=red>第一次运行请刷新一下页面。</font>

</body>

</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JQERY limittext 插件0.2版(长内容限制显示)
Aug 27 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
JS定义类的六种方式详解
May 12 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
JavaScript函数详解
Feb 27 #Javascript
浅谈JavaScript的事件
Feb 27 #Javascript
JS实现图片放大镜效果的方法
Feb 27 #Javascript
浅谈javascript中的instanceof和typeof
Feb 27 #Javascript
js实现有时间限制消失的图片方法
Feb 27 #Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 #Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 #Javascript
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
基于jquery的一个图片hover的插件
2010/04/24 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
vue 获取及修改store.js里的公共变量实例
2019/11/06 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python 多线程Threading初学教程
2017/08/22 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
python 实现单例模式的5种方法
2020/09/23 Python
Python常用外部指令执行代码实例
2020/11/05 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
2014年环保局工作总结
2014/12/11 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB