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

来源：互联网发布：修改歌曲信息软件编辑：程序博客网时间：2024/06/02 05:15

第一种

    <!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="隐藏" onclick="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" onclick="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].onclick=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.onclick=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.onload=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>

0 0