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

heisetoufa · 发表于 2013-2-8 00:26:21

1.
<!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">              </script>    </head>    <body>                   <input id="btnDisplay" type="button" value="隐藏"  />       <div id="helloDiv">       Hello,everyone<p></p>       Hello,everytwo<p></p>       Hello,everythree<p></p>       </div>    </bdoy>  </html>

2.
<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" >展开</span><br/> 藤床纸帐朝眠起，说不尽、无佳思。沈香烟断玉炉寒，伴我情怀如水。笛声三弄，梅心惊破，多少春情意。小风疏雨萧萧地，又催下、千行泪。吹箫人去玉楼空，肠断与谁同倚？一枝折得，人间天上，没个人堪寄。欢迎再次光临牛图库特效。 </div>

3.

<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 tablesvar 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 loadswindow.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>

黑色头发:http://heisetoufa.iteye.com/

		自动登录	找回密码
密码			立即注册