div显示隐藏

最新推荐文章于 2021-07-06 10:24:05 发布

高傲的苹果

最新推荐文章于 2021-07-06 10:24:05 发布

阅读量563

点赞数

本文链接：https://blog.youkuaiyun.com/qwertlijia/article/details/19118209

版权

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

</HEAD>

<BODY>
<span οnclick="ShowHide('${item.roomid}')" style="cursor=hand">点击</span>
<div id="${item.roomid}" style="display:block">
<table width="200" border="1">
<tr>
    <td> aaaaaaaaaa</td>
    <td> bbbb</td>
</tr>
<tr>
    <td> ccccccc</td>
    <td> dddddddd</td>
</tr>
<tr>
    <td> eeeeee</td>
    <td> fffffffff</td>
</tr>
</table>
</div>
<table width="200" border="1">
<tr>
    <td> aaaaaaaaaa</td>
    <td> bbbb</td>
</tr>
<tr>
    <td> ccccccc</td>
    <td> dddddddd</td>
</tr>
<tr>
    <td> eeeeee</td>
    <td> fffffffff</td>
</tr>
</table>
<script>
  //取得ID节点
function $(id){return(document.getElementById(id))}
//取得实际高度
function coculateOffset(ele){
    var node = $(ele);
    var orignalHeight = node.style.height;
    var orignalDisplay = node.style.display;
    node.style.height = "";
    node.style.display = "block";
    var h = node.offsetHeight;
    node.style.height = orignalHeight;
    node.style.display = orignalDisplay;
    return(h);
}
//显示元素
function showEle(ele){
    var h = coculateOffset(ele)
    var i = 1;
    var t = setInterval(function(){
        i += i;
        $(ele).style.height = i + "px";
  $(ele).style.display = "";
        if( i > h/2){
            $(ele).style.height = h + "px";
            clearInterval(t);
        }
    },35)
}
//隐藏元素
function hideEle(ele){
    var h = coculateOffset(ele);
    var t = setInterval(function(){
        if(h > 2){
            h = h/2;
        }else{
            h = 0;
            clearInterval(t);
            $(ele).style.display="none";
        }
        $(ele).style.height = h + "px";
    },60)
}
//判断显隐
function ShowHide(ele){
    var currentHeight = $(ele).style.display == "none" ? 0 : $(ele).offsetHeight;
$(ele).style.overflow = "hidden";
    if(currentHeight > 0){
        hideEle(ele);
    }else{
        showEle(ele);
    }
}
</script>
</BODY>
</HTML>