<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. Javascript中日期函数的相关操作

    Date对象具有多种构造函数,下面简单列举如下: new Date() new Date(milliseconds) new Date(datestring) new Date(year, month ...

  2. hibernate的主键生成策略

    一共是13种,其中包括native native: 对于 oracle 采用 Sequence 方式,对于MySQL 和 SQL Server 采用identity(自增主键生成机制),native就 ...

  3. javascript的语句和函数

    1.for-in语句:是一种精准的迭代语句,可以用来枚举对象的属性. 2.label语句:在代码中添加标签,以便将来使用,由break和continue语句调用. 3.with语句:将代码的作用域设置 ...

  4. easyui datagrid 设置列宽

    <script>        $(document).ready(function () {            alert("sdf");            ...

  5. imeOptions 属性详解

    默认情况下软键盘右下角的按钮为“下一个”,点击会到下一个输入框,保持软键盘 设置 android:imeOptions="actionDone" ,软键盘下方变成“完成”,点击后光 ...

  6. HDELETE

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

  7. centos7 最小化安装 无 ifconfig,netstat 的安装

    centos7 最小化安装 无 ifconfig,netstat 的安装 centos7 最小化安装之后,默认是没有 ifconfig,netstat命令的: 我们可以直接使用 yum -y inst ...

  8. Java 中String常用方法

    java中String的常用方法 1.length() 字符串的长度 例:char chars[]={'a','b'.'c'}; String s=new String(chars); int len ...

  9. 【NOIP2015】推销员

    推(chuan)销员 分析 这里主要阐述一下我的分析思路. 看起来挺直观的. 最初的想法,我们枚举每一个最远点mxp的位置,然后对之前的a进行排序. 那么以mxp为最远点,选x个的最大疲劳值为: 这样 ...

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

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