收缩和展开效果

简介: 收缩展开效果 /* 收缩展开效果 */ .text{line-height:22px;padding:0 6px;color:#666;} .

<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>收缩展开效果</title>
<script type="text/javascript" src="common/jquery-1.2.6.min.js"></script>
<link type="text/css" rel="stylesheet" href="common/common.css" />
<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>

</body>
</html>

 

相关文章
ArcMap矢量图层的零碎、空洞区域填补与独立区域剔除:消除面部件
本文介绍在ArcMap软件中,基于消除面部件(“Eliminate Polygon Part”)工具,对矢量面要素的零碎、空洞区域加以删除,同时将游离于要素主体之外的部分剔除的方法~
112494 1
ArcMap矢量图层的零碎、空洞区域填补与独立区域剔除:消除面部件
|
JavaScript 前端开发
jquery 展开收缩改变状态 保姆式教学代码,默认第二项展开
jquery 展开收缩改变状态 保姆式教学代码,默认第二项展开
自下而上自动循环滚动
自下而上自动循环滚动
111 0
自下而上自动循环滚动
|
前端开发 JavaScript
【前端】侧边栏收缩的优化
【前端】侧边栏收缩的优化
312 0
|
C#
【WindowsAPI之MoveWindow】 C#调整目标窗体的位置、大小
首先查看一下WindowsAPI给我们的解释  函数功能:该函数改变指定窗口的位置和尺寸。对于顶层窗口,位置和尺寸是相对于屏幕的左上角的:对于子窗口,位置和尺寸是相对于父窗口客户区的左上角坐标的。 函数原型:bool MoveWindow(HWND hWnd,int x,int y,int nWidth,int nHeight,bool BRePaint);   参数: hWnd:窗口句柄。
1943 0
|
数据可视化 Android开发 容器
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(一)
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(一)
756 0
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(一)
|
数据可视化
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(二)
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(二)
566 0
【约束布局】ConstraintLayout 引导线 Guideline 约束 ( 简介 | 可视化操作 | 属性 | 水平引导线 | 垂直引导线 | 开始结束尺寸 | 百分比位置 | 约束组件 )(二)