js javascript 几个抽缩/展开/折叠的js代码
日期：2014-05-16 浏览次数：20421 次
js javascript 几个收缩/展开/折叠的js代码
1.
2.
3.
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">
<!--
$(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>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" onclick="shoppingcat();">展开</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 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=t
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
