<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. [转载] what's goole mock

    原文: https://code.google.com/p/googlemock/wiki/V1_7_ForDummies 地址被墙了, 看起来费劲, 转载一份 Google C++ Mocking ...

  2. (二)stm32之中断配置

    一.stm32的中断和异常 Cortex拥有强大的异常响应系统,它能够打断当前代码执行流程事件分为异常和中断,它们用一个表管理起来,编号为0~15为内核异常,16以上的为外部中断,这个表就是中断向量表 ...

  3. netbeans for php常用快捷键

    文本编辑 复制当前行到上一行/下一行ctl+shf+up 移动当前行到上一行/下一行shf+alt+left/right/down/up 删除当前行ctl+E 生成下一行shf+enter(回车) 大 ...

  4. QBC用法

    方法 说明 Restrictions.eq ＝ Restrictions.allEq 利用Map来进行多个等于的限制 Restrictions.gt > Restrictions.ge > ...

  5. java语法糖3 深入剖析Java中的装箱和拆箱

    装箱 在Java SE5之前,如果要生成一个数值为10的Integer对象,必须这样进行: Integer i = new Integer(10); 而在从Java SE5开始就提供了自动装箱的特性, ...

  6. 对List里的对象元素进行排序

    public class Student { private int studentId; private String studentName; private int age; public St ...

  7. hiho_1069_最近公共祖先3

    题目 给出一棵家族树,树上的节点可以由名字唯一标识.给出若干个查询,查询的内容为两个名字,结果为两个名字的最近公共祖先. 题目链接: 最近公共祖先 分析 在线的RMQ + LCA 算法,先用dfs将树 ...

  8. java 异常2

    自定义异常类: import java.util.Scanner; /** * Created by lenovo on 2016/8/12. */ class NoMoneyException ex ...

  9. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  10. edm注意细节

    Email Direct Marketing不要有js,css也放在html里面不能有热区,所有的border要设置为0在浏览器里面邮件发送可能会歪掉,可以测试接受后是否歪掉 有点时候表格会有细缝等等 ...