<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. for循坏的穷举与迭代，while、do while循环

    for循环的穷举:所有情况走一遍,使用if筛选出符合的情况. 单位发一张150元购物卡,到超市买三种洗化用品,洗发水15元,香皂两元,牙刷5元,刚好花完150元,有多少种买法,每种买法各买几样. 百鸡 ...

  2. Java中List的使用

    package ch8; import java.util.*; /** * Created by Jiqing on 2016/11/27. */ public class ListTest { p ...

  3. ViewPager 基本方式加载view

    1.新建view_pager.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayo ...

  4. [html] HTML结构的语义化

    原文链接:http://www.cnblogs.com/freeyiyi1993/p/3615179.html 1.什么是html语义化 选择合适的html标签,便于开发者阅读和写出更优雅的代码的同时 ...

  5. 使用kaptcha生成验证码

    原文:http://www.cnblogs.com/xdp-gacl/p/4221848.html kaptcha是一个简单好用的验证码生成工具,通过配置,可以自己定义验证码大小.颜色.显示的字符等等 ...

  6. 转：从开源项目学习 C 语言基本的编码规则

    从开源项目学习 C 语言基本的编码规则 每个项目都有自己的风格指南:一组有关怎样为那个项目编码约定.一些经理选择基本的编码规则,另一些经理则更偏好非常高级的规则,对许多项目而言则没有特定的编码规则,项 ...

  7. Linux计划任务入门详解

    Linux操作系统定时任务系统 Cron 入门 cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业.由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动 ...

  8. Apache mod_jk

    http://tomcat.apache.org/connectors-doc/generic_howto/loadbalancers.html http://tomcat.apache.org/co ...

  9. armp启动

    1.启动apahcehttpd.exe -k starthttpd.exe -k restart 重启httpd.exe -k install 安装 2.php启动apache.conf文件添加:Lo ...

  10. Linux 命令速查

    学生信,Linux是最最基本的技能,要尽量将自己的工作平台转移到Linux,编程写脚本,这样会极大的提升工作效率,找工作时也不会太怂.Linux所有的任务都是通过命令来完成的,具有高度的统一性.Lin ...