<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. 一个不错的能将HTML表格导出为excel,pdf等的jquery插件

    https://github.com/kayalshri/tableExport.jquery.plugin https://github.com/kayalshri/ tableExport.jqu ...

  2. HDU 5119

    被一个学长逼着做的题...谢谢他了~  题中dp[i][j] i即为第i个数,j为当前输入的数能xor到的数 同时一个数有两种选择,1.not xor  2.xor 最大的j不会超过11...11b( ...

  3. 专题实验 PGA

    PGA : 是完全为 server process 服务的, 在 server process 创建时被分配到, 在server process 终止时被释放. 而且是非共享的, 只独立服务于这个se ...

  4. Python学习（5）条件语句

    目录 Python 条件语句 Python 简单的语句组 Python 条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了 ...

  5. linux之flock函数锁文件

    头文件  #include<sys/file.h> 定义函数  int flock(int fd,int operation); 函数说明  flock()会依参数operation所指定 ...

  6. python中if __name__ == '__main__'

    python 中__name__ = '__main__' 的作用,到底干嘛的? 有句话经典的概括了这段代码的意义: “Make a script both importable and execut ...

  7. 【Todo】Lucene系统学习

    之前已经写过一篇关于Lucene安装学习的文章:http://www.cnblogs.com/charlesblc/p/5980525.html 还有一篇关于Solr安装使用的文章:http://ww ...

  8. 阻塞与非阻塞的IO网络读写

    看我之前的文章就知道,一般对于网络读的socket,都会加上O_NONBLOCK,非阻塞的选项. int setnonblocking(int fd) { int old_option = fcntl ...

  9. activiti jbpm相关资源

    Activiti 5.16 用户手册 http://www.mossle.com/docs/activiti/index.html jBPM 4.4开发指南 http://www.mossle.com ...

  10. SecureCRT设置

    SecureCRT设置 文章来源:http://blog.csdn.net/dongqinliuzi/article/details/39890569 本文主要介绍SecureCRT的使用方法和技巧. ...