3个收缩/展开/折叠的js代码

最新推荐文章于 2025-05-03 14:15:56 发布

qiuqiu_baobao_111

最新推荐文章于 2025-05-03 14:15:56 发布

阅读量1.6k

点赞数 1

分类专栏： javascript

javascript 专栏收录该内容

4 篇文章

订阅专栏

第一种

    <!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=gbk" />    
            <title>StripingTable</title>    
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>    
            <script type="text/javascript">    
            <!--     
                $(document).ready(function(){$("#helloDiv").hide(); });     
                      
                function changeDisplay(){     
                    var helloDivObj = $("#helloDiv");     
                    var buttonObj = $("#btnDisplay");     
                    var val = buttonObj.attr("value");     
                    if(val=="隐藏"){     
                        helloDivObj.hide();     
                        buttonObj.attr("value","显示");     
                    }else{     
                        helloDivObj.show();     
                        buttonObj.attr("value","隐藏");     
                    }                
        }     
            -->    
            </script>    
        </head>    
        <body>    
                 
            <input id="btnDisplay" type="button" value="隐藏" οnclick="changeDisplay()" />    
            <div id="helloDiv">    
            Hello,everyone<p></p>    
            Hello,everytwo<p></p>    
            Hello,everythree<p></p>    
            </div>    
        </bdoy>    
    </html>

第二种

<style>   
#content {   
font-size: 14px;   
width: 100%;   
height: 50px;   
background: #eee;   
padding: 10px;   
border: 4px #ccc double;   
overflow: hidden;   
}   
#key {   
color: red;   
float: right;   
margin-top: -20px;   
}   
span{cursor:pointer;}   
</style>   
<script>   
var s=5;   
var minheight=50;   
var maxheight=450;   
function shoppingcat(){   
  var content=document.getElementById("content");   
  var key = document.getElementById("key");   
  var t=content.style;   
  if(t.height==""||t.height==0)   
    t.height=minheight;   
  var h=parseInt(t.height);   
  if(key.innerHTML=="展开"){   
    h+=s;   
    t.height=h+"px";   
    if(h<maxheight){   
      setTimeout("shoppingcat();",1);   
    }else{   
      key.innerHTML="关闭";   
    }   
  }else{   
    h-=s;   
    t.height=h+"px";   
    if(h>minheight){   
      setTimeout("shoppingcat();",1);   
    }else{   
      key.innerHTML="展开";   
    }   
  }   
}   
</script>   
  
<div id="content"><br/>   
<span id="key" οnclick="shoppingcat();">展开</span><br/>   
工作与爱情最大的区别就是永远没法平等的相爱
</div>

第三种

    <html xmlns="http://www.w3.org/1999/xhtml">  
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    <title>www.webjx.com</title>  
    <script language="javascript">  
    function tablecollapse()  
    {  
    /* Variables */  
    var collapseClass='footcollapse';  
    var collapsePic='http://webdesign.chinaitlab.com/UploadFiles_8014/200706/20070620173213376.gif';  
    var expandPic='http://webdesign.chinaitlab.com/UploadFiles_8014/200706/20070620173213394.gif';  
    var initialCollapse=true;  
    // loop through all tables  
    var t=document.getElementsByTagName('table');  
    var checktest= new RegExp("(^|\\s)" + collapseClass + "(\\s|$)");  
    for (var i=0;i<t.length;i++)  
    {  
       // if the table has not the right class, skip it  
       if(!checktest.test(t[i].className)){continue;}    
       // make the footer clickable  
       t[i].getElementsByTagName('tfoot')[0].οnclick=function()  
       {  
        // loop through all bodies of this table and show or hide   
        // them  
        var tb=this.parentNode.getElementsByTagName('tbody');  
        for(var i=0;i<tb.length;i++)  
        {  
         tb[i].style.display=tb[i].style.display=='none'?'':'none';  
        }     
        // change the image accordingly  
        var li=this.getElementsByTagName('img')[0];  
        li.src=li.src.indexOf(collapsePic)==-1?collapsePic:expandPic;   
       }  
       // if the bodies should be collapsed initially, do so  
       if(initialCollapse)  
       {  
        var tb=t[i].getElementsByTagName('tbody');  
        for(var j=0;j<tb.length;j++)  
        {  
         tb[j].style.display='none';  
        }     
       }  
       // add the image surrounded by a dummy link to allow keyboard   
       // access to the last cell in the footer  
       var newa=document.createElement('a');  
       newa.href='#';  
       newa.οnclick=function(){return false;}  
       var newimg=document.createElement('img');  
       newimg.src=initialCollapse?expandPic:collapsePic;  
       var tf=t[i].getElementsByTagName('tfoot')[0];  
       var lt=tf.getElementsByTagName('td')[tf.getElementsByTagName('td').length-1];  
       newa.appendChild(newimg);  
       lt.insertBefore(newa,lt.firstChild);  
    }    
    }  
    // run tablecollapse when the page loads  
    window.οnlοad=tablecollapse;  
    </script>  
    <style type="text/css">  
    body{  
    font-family:Arial,Sans-Serif;  
    font-size:90%;  
    background:#cc9;  
    }  
    #boundary{  
    background:#f8f8f8;  
    padding:2em;  
    width:40em;  
    }  
    h1{  
    font-family:"Trebuchet MS",Sans-serif;  
    text-transform:uppercase;  
    color:#696;  
    font-size:120%;  
    }  
    table.footcollapse{  
    width:30em;/* 调整表格宽度*/  
    }  
    table.footcollapse caption{  
    font-size:120%;  
    text-transform:uppercase;  
    text-align:left;  
    padding:.5em 30em;  
    }  
    table.footcollapse th{  
    text-align:left;  
    }  
    table.footcollapse,table.footcollapse th,table.footcollapse th  
    {  
    border:none;  
    border-collapse:collapse;   
    }  
    table.footcollapse thead th  
    {  
    width:10em;  
    border-style:solid;  
    border-width:1px;  
    border-color:#cff #69c #69c #cff;  
    background:#9cf;  
    padding:2px 10px;  
    }  
    table.footcollapse tfoot th,  
    table.footcollapse tfoot td  
    {  
    border-style:solid;  
    border-width:1px;  
    border-color:#9cf #369 #369 #9cf;  
    background:#69c;  
    padding:2px 10px;  
    }  
    table.footcollapse tbody{  
    background:#ddd;  
    }  
    table.footcollapse tbody td{  
    padding:5px 10px;  
    border:1px solid #999;  
    }  
    table.footcollapse tbody th{  
    padding:2px 10px;  
    border:1px solid #999;  
    border-left:none;  
    }  
    table.footcollapse tbody tr.odd{  
    background:#ccc;  
    }  
    table.footcollapse tfoot td img{  
    border:none;  
    vertical-align:bottom;  
    padding-left:10px;  
    float:right;  
    }  
      
    </style>  
    </head>  
    <body>  
    <table summary="CDs I listened to recently" class="footcollapse">  
    <caption>这个</caption>  
    <thead>  
       <tr>  
        <th>列1</th>  
        <th>列2</th>  
        <th>列3</th>  
       </tr>  
    </thead>  
    <tfoot>  
       <tr>  
        <th>结尾1</th>  
        <td colspan="2">结尾2</td>  
       </tr>  
    </tfoot>  
    <tbody>  
       <tr>  
        <th>值1</th>  
        <td>值2</td>  
        <td>值3</td>  
       </tr>  
       <tr class="odd">  
        <th>值4</th>  
        <td>值5</td>  
        <td>值6</td>  
       </tr>  
       <tr>  
        <th>值7</th>  
        <td>值8</td>  
        <td>值9</td>  
       </tr>  
       <tr class="odd">  
        <th>值10</th>  
        <td>值11</td>  
        <td>值12</td>  
       </tr>  
       <tr>  
        <th>值13</th>  
        <td>值14</td>  
        <td>值15</td>  
       </tr>  
    </tbody>  
    </table>  
      
    </body>  
    </html>