<html>

<head>

<title>div展开收缩代码</title>

<style>

* { margin:0; padding:0;}

body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}

h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333; padding:3px; display:block; color:#99CC00}

.class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}

span { position:absolute; right:10px; top:8px; cursor: pointer; color:yellow;}

p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}

#class1content, #class2content,#class3content { height:50px;overflow:hidden;display:none;}

</style>

<script>

function $(element){

return element = document.getElementById(element);

}

function $D(element){

var d=$(element);

var h=d.offsetHeight;

var maxh=300;

function dmove(){

if(h>=maxh){

d.style.height='300px';

clearInterval(iIntervalId);

}else{

h+=50; //设置层展开的速度

d.style.display='block';

d.style.height=h+'px';

}

}

iIntervalId=setInterval(dmove,2);

}

function $D2(element){

var d=$(element);

var h=d.offsetHeight;

var maxh=300;

function dmove(){

if(h<=0){

d.style.display='none';

clearInterval(iIntervalId);

}else{

h-=50;//设置层收缩的速度

d.style.height=h+'px';

}

}

iIntervalId=setInterval(dmove,2);

}

function $use(targetid,objN){

var d=$(targetid);

var sb=$(objN);

if (d.style.display=="block"){

$D2(targetid);

d.style.display="none";

sb.innerHTML="展开";

} else {

var p=document.getElementsByTagName("p");

var span=document.getElementsByTagName("span");

for(var i=0,l=p.length;i<l;i++){

if(p[i]!=d){

p[i].style.height=0;

p[i].style.display="none";

span[i].innerHTML="展开";

}

}

$D(targetid);

d.style.display="block";

sb.innerHTML='收缩';

}

}

</script>

</head>

<body>

<div class="class1">

<h1>div展开收缩效果</h1>

<span id="stateBut" onClick="$use('class1content','stateBut')">展开</span>

<p id="class1content">something.........</p>

</div>

<div class="class1">

<h1>div展开收缩效果</h1>

<span id="stateBut1" onClick="$use('class2content','stateBut1')">展开</span>

<p id="class2content">something.........</p>

</div>

<div class="class1">

<h1>div展开收缩效果</h1>

<span id="stateBut2" onClick="$use('class3content','stateBut2')">展开</span>

<p id="class3content">wojiade</p>

</div>

</body>

</html>

Div层的展开与收缩的代码的更多相关文章

  1. 关于WEB开发下面DIV层被OCX控件拦住问题

    控件分为有窗口控件与无窗口控件,无窗口控件很好办,如flash控件,可以通过添加wmode属性来解决挡住DIV层这个问题,添加的代码如下: 解决无窗口控件挡住DIV: 1 <param  nam ...

  2. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  3. 页面固定DIV层CSS代码

    有时候为了用户体验更好些,网页设计师会把网站导航放在一个固定的DIV层里面,不随滚动条滚动.本方法是利用CSS,position:fixed属性来固定层,fixed是特殊的absolute,即fixe ...

  4. CSS 如何使DIV层水平居中

    今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可是事实上这样的方法科学吗? 经过 ...

  5. IE6下div层被select控件遮住的问题解决方法

    Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...

  6. JavaScript学习之DIV层与图像

    DIV层与图像 一.设计一个可定位的层 1.设置位置(position)和大小 (1)绝对定位(absolute):以页面边框为参照,只要设置好绝对位置,那么元素的位置会始终固定在距离边框某个位置的距 ...

  7. div层遮盖flash(兼容浏览器)

    今天测试div层和flash的交互,发现div层总是被flash层遮盖,在百度上找了一会,说是加个<param name="wmode" value="transp ...

  8. DataGridView之行的展开与收缩

    很多数据都有父节点与子节点,我们希望单击父节点的时候可以展开父节点下的子节点数据. 比如一个医院科室表,有父科室与子科室,点击父科室后,在父科室下面可以展现该科室下的所有子科室. 我们来说一下在Dat ...

  9. 问题：如何在固定大小的DIV层插入N多个图片

    这是贴友问的一个问题,具体需求是: 如何在固定大小的DIV层插入N多个图片,使其一行排列,超出层宽时出现滑动条? 原以为利用overflow属性可以实现,但是测试失败.后来利用div层叠实现了效果. ...

随机推荐

  1. mysql 变量

    用户变量 1.用户变量,用户变量和数据库连接有关,连接后声明变量,连接断开后,自动消失. 2.用户变量以@开头,select一个没有赋值的用户变量,返回NULL,也就是没有值,注意取值为NULL与取值 ...

  2. Object Pascal 过程与函数

    过程与函数 过程与函数是实现一定功能的语句块,是程序中的特定功能单元.可以在程序的其他地方被调用,也可以进行递归调用.过程与函数的区别在于过程没有返回值,而函数有返回值. 1．过程与函数的定义 过程与 ...

  3. ios7适配一些问题以及64位32位

    ios7适配一些问题(http://www.cocoachina.com/ios/20130703/6526.html) 1.iOS应用如何实现64位的支持 http://www.codeceo.co ...

  4. ctrl+enter提交留言

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  5. 转：设计模式-----桥接模式(Bridge Pattern)

    转自:http://www.cnblogs.com/houleixx/archive/2008/02/23/1078877.html 记得看原始链接的评论. 学习设计模式也有一段时间了,今天就把我整理 ...

  6. IOS开发证书变成“此证书的签发者无效”解决方法

    IOS开发证书全部变成无效,如下图  打包提示错误  解决方法: 1. 下载https://developer.apple.com/certificationauthority/AppleWWDRCA ...

  7. Redhat 6.4_联网 yum 配置

    步骤简述----------------------------------------------------------------- 1. 准备软件包 下载第三步的软件包即可.由于是联网yum配 ...

  8. 【matlab】读写文件

    save('pqfile.mat','M'); ('E:\我的坚果云\pqfile.mat','M'); 其他: http://blog.csdn.net/iqizheng/article/detai ...

  9. HDELETE

    use HDELETE to migration file deletion is good a choice. sample: //STEP0010 EXEC PGM=IKJEFT01 //SYSO ...

  10. html+asp.net上传文件

    type="file" 的name以及id一定要写,并且名字相同 http://niunan.iteye.com/blog/479605 <form id="for ...