编程 Javascript

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程序设计有所帮助。

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

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

如何用javascript控制上传文件的大小

Oct 26 Javascript

File, FileReader 和 Ajax 文件上传实例分析(php)

Apr 27 Javascript

修改好的jquery滚动字幕效果实现代码

Jun 22 Javascript

JavaScript单元测试ABC

Apr 12 Javascript

jquery.pagination.js 无刷新分页实现步骤分享

May 23 Javascript

JavaScript利用append添加元素报错的解决方法

Jul 01 Javascript

javascript设计模式之对象工厂函数与构造函数详解

Jul 30 Javascript

Javascript 实现全屏滚动实例代码

Dec 31 Javascript

基于JQuery及AJAX实现名人名言随机生成器

Feb 10 Javascript

jQuery实现 RadioButton做必选校验功能

Jun 15 jQuery

jQuery实现简单的手风琴效果

Apr 17 jQuery

vue微信分享到朋友圈 vue微信发送给好友

Nov 28 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