DIV+CSS实现显示隐藏层

来源：互联网发布：ubuntu 163源编辑：程序博客网时间：2024/04/25 22:34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>隐藏/显示层</title>
<style type="text/css">
<!--
body{
background: #FFF;
color: #000;
font: normal 12px 宋体,arial,sans-serif;
margin: 0;
padding: 0;
text-align: left;
}

div,form,ul,ol,li,span,p {
border: 0;
margin: 0;
padding: 0;
}

/*清除float*/
.clear{
clear: both;
font-size: 1px;
visibility: hidden;
}

/*分类标题*/
.class_title{
margin: 0 auto;
width: 504px;
height: 17px;
border: 1px solid #9EB1C0;
padding: 1px;
background:url(http://www.east-dragon.cn/files/sw/images/title_bg.gif);
}

.class_title h2{
margin: 0;
padding: 2px 0 2px 18px;
height: 12px;
color: #16387C;
font: bold 13px 宋体,arial,sans-serif;
cursor:pointer;
letter-spacing: 2px;
text-align: left;
}

#tabclass1{
background:url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif) 6px center no-repeat;
}

/*分类列表（模块一）*/
#class_cnt1{
background: url(http://www.east-dragon.cn/files/sw/images/class_cntbg.gif) left bottom repeat-x;
border: solid #9EB1C0;
border-width: 0 1px 1px 1px;
height: 287px;
margin: 0 auto;
text-align: left;
width: 506px;
display: block;
overflow:hidden;
}

#class_cnt1 p{
    margin:0;
    padding:3px;
    line-height:150%;
}
-->
</style>

// 显示列表框
function displayList(){
       var h = getObject('class_cnt1').offsetHeight;   // 内容容器class_cnt1的初始高度（这时高度为：0）
       var max_h = 287; // 容器的最大高度

       var anim = function(){
     h += 50; // 每次递增50像素
     //如果增加的高度开始超过容的最大高度
     if(h >= max_h){
             getObject('class_cnt1').style.height = "287px"; // 工期高度为287px(因为我们只希望容器这么高)
             getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop1.gif)"; // 让图片标签改变背景
             if(tt){window.clearInterval(tt);} // 如果高度在每2毫秒递减，则清楚改行为（如果不清楚，程序将一直自动运行高度每2毫秒递减）
     }
     else{ // 如果增加中的容器高度没有超过287px
                 getObject('class_cnt1').style.display="block"; // 让容器可见（这样我们才能够看到容器在增高的效果）
                 getObject('class_cnt1').style.height = h + "px"; // 容器高度不断的以50px递增
     }
     }

   var tt = window.setInterval(anim,2);   // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）
}

// 隐藏列表框
function hiddenList(){
        var h = getObject('class_cnt1').offsetHeight; // 内容容器class_cnt1的初始高度（这时高度为：287px）
    var anim = function(){
      h -= 50; // 每次递减50像素

      if(h <= 5){
              getObject('class_cnt1').style.display="none"; // 内容容器不可见（当容器高度小于5px）
            getObject('tabclass1').style.backgroundImage="url(http://www.east-dragon.cn/files/sw/images/tab_drop2.gif)";
            if(tt){window.clearInterval(tt);}
        }
        else{
            getObject('class_cnt1').style.height = h + "px"; // // 容器高度不断的以50px递减
        }
    }

    var tt = window.setInterval(anim,2); // 设置每2毫秒循环一次（每2毫秒，运行一次anim[容器的高度递减50px]）
}

//=======================================================
//函数名称：showClassList()
//函数功能：隐藏-显示级分类列表框（class_cnt1）
//返回值：无
//=======================================================
function showClassList(){
    // 如果内容容器为不可见的display:none
    if(getObject('class_cnt1').style.display == "none"){
        displayList(); // 显示内容框
    }
    else{ // 如果内容容器为可见的display:block
      hiddenList(); // 隐藏内容框
}
}
-->
</script>
</head>
<body>
<div class="class_title">
<h2 id="tabclass1" onclick="showClassList()" title="隐藏/显示信息">分类信息</h2>
</div>
<div id="class_cnt1">
<p>
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
1111111<br />
111111111<br />
111111111<br />
</p>
</div>
</body>
</html>