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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
Apr 25 Javascript
Element PageHeader页头的使用方法
Jul 26 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
使用PHP求两个文件的相对路径
2013/06/20 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
简单上手Python中装饰器的使用
2015/07/12 Python
详解Python编程中time模块的使用
2015/11/20 Python
python中私有函数调用方法解密
2016/04/29 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
Python 备份程序代码实现
2017/03/06 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python队列Queue的详解
2019/05/10 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
python能自学吗
2020/06/18 Python
python属于哪种语言
2020/08/16 Python
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
如何提高JDBC的性能
2013/04/30 面试题
护士辞职信范文
2014/01/19 职场文书
个人优缺点自我评价
2014/01/27 职场文书
幼儿园师德演讲稿
2014/05/06 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书