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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
微信小程序实现的五星评价功能示例
Apr 25 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
Vue.js实现tab切换效果
Jul 24 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
收音机的保养
2021/03/01 无线电
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
jquery 指南/入门基础
2007/11/30 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
javascript消除window.close()的提示窗口
2015/05/20 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
vue使用Axios做ajax请求详解
2017/06/07 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Python3 使用pillow库生成随机验证码
2019/08/26 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
北承题目(C++)
2012/05/16 面试题
毕业生自我鉴定范文
2013/11/08 职场文书
公司合作意向书
2014/04/01 职场文书
实习推荐信
2014/05/10 职场文书
大学生就业求职信
2014/06/12 职场文书
模具专业求职信
2014/06/26 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
生日祝酒词大全
2015/08/10 职场文书
七年级作文之下雨天
2019/12/23 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫