JS仿QQ的展開/折疊菜單

2024-09-05 12:19:27

字體：大中小

供稿：網(wǎng)友

仿QQ菜單風(fēng)格一樣的下拉菜單，點(diǎn)擊后展開或折疊，可以無限擴(kuò)展菜單單元，JS會(huì)自動(dòng)添加對(duì)象，并加以控制，代碼也不算復(fù)雜，修改方便，而且很容易看懂，或許你以后能用得上吧！

<!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><title>仿QQ展開菜單</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">table{width:100px;overflow:hidden;}#control,#control table,#control table td{font-size:12px;}#control{width:100px;background-color:#ccc;font-size:12px;color:#333333;text-align:center;}#control table{width:100px;height:20px;overflow:hidden;}#control table li{list-style:none;height:20px;line-height:20px;overflow:hidden;}#control table .tabTit{background:#E0E8B8;}#control a{font-weight:normal;font-size:24px;color:#6F7848;text-decoration:none;padding-right:10px;}#control .testLink{font-weight:bold;font-size:12px;}.test{width:100px;background-color:#f6f6f6;overflow:hidden;}.test li{list-style:none;color:#000;font-size:13px;line-height:20px;}#control table,.test table{margin:0 auto;text-align:center;}.style1{font-size:8px;color:#fff;}</style><script language="javascript">function $G(Read_Id) { return document.getElementById(Read_Id) }var openedObjId=nullfunction Effect(ObjectId){	if (openedObjId){		$G(openedObjId+"tab").innerHTML = "+";		Start(openedObjId,'Close');	}	if(openedObjId!=ObjectId){		$G(ObjectId+"tab").innerHTML = "-";		Start(ObjectId,'Opens');		openedObjId=ObjectId	}	else openedObjId=null}function Start(ObjId,method){var BoxHeight = $G(ObjId).offsetHeight; //對(duì)象高度var MinHeight = 5;//定義最小高度var MaxHeight = 130;//定義最大高度var BoxAddMax = 1;//遞增量初始值var Every_Add = 0.15;//每次的遞(減)增量[數(shù)值越大速度越快]var Reduce    = (BoxAddMax - Every_Add);var Add       = (BoxAddMax + Every_Add);//折疊if (method == "Close"){var Alter_Close = function(){//構(gòu)建虛擬的[遞減]循環(huán)	BoxAddMax /= Reduce;	BoxHeight -= BoxAddMax;	if (BoxHeight <= MinHeight){		$G(ObjId).style.display = "none";		window.clearInterval(BoxAction);	}	else $G(ObjId).style.height = BoxHeight;}var BoxAction = window.setInterval(Alter_Close,1);}//展開else if (method == "Opens"){var Alter_Opens = function(){	BoxAddMax *= Add;	BoxHeight += BoxAddMax;	if (BoxHeight >= MaxHeight){		$G(ObjId).style.height = MaxHeight;		window.clearInterval(BoxAction);	}else{	$G(ObjId).style.display= "block";	$G(ObjId).style.height = BoxHeight;	}}var BoxAction = window.setInterval(Alter_Opens,1);}}</script></head><body><div   class="iwvjtn8m0"   id="control">  <table width="100%" border="0" cellpadding="0" cellspacing="0">    <tr><td width="100%" align="center" class="tabTit" onClick="Effect('test');"><li id="testtab" style="float:right">+</li><li style="float:left">網(wǎng)站首頁(yè)</li></td>    </tr>  </table></div><div   class="iwvjtn8m0"   id="test" class="test" style="display:none;">  <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">    <tr>      <td colspan="3" align="center" valign="top"><ul><li>游戲娛樂</li><li>媒體網(wǎng)絡(luò)</li><li>窗體界面</li><li>算法相關(guān)</li></ul></td>    </tr>  </table></div><br><div   class="iwvjtn8m0"   id="control">  <table width="100%" border="0" cellpadding="0" cellspacing="0">    <tr>      <td width="100%" align="center" class="tabTit" onClick="Effect('test1');" ><li id="test1tab" style="float:right">+</li><li style="float:left">JAVA源代碼</li></td>    </tr>  </table></div><div   class="iwvjtn8m0"   id="test1" class="test" style="display:none;">  <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">    <tr>      <td colspan="3" align="center" valign="top"><ul><li>系統(tǒng)相關(guān)</li><li>綜合應(yīng)用</li><li>文件操作</li></ul></td>    </tr>  </table></div><br><div   class="iwvjtn8m0"   id="control">  <table width="100%" border="0" cellpadding="0" cellspacing="0">    <tr>      <td width="100%" align="center" class="tabTit" onClick="Effect('test2');"><li id="test2tab" style="float:right">+</li><li style="float:left">JAVA源代碼</li></td>    </tr>  </table></div><div   class="iwvjtn8m0"   id="test2" class="test" style="display:none;">  <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">    <tr>      <td colspan="3" align="center" valign="top"><ul><li>書籍源碼</li><li>初學(xué)實(shí)例</li><li>類庫(kù)組件</li></ul></td>    </tr>  </table></div></body></html>

上一篇：標(biāo)簽在右側(cè)的豎向選項(xiàng)卡

下一篇：標(biāo)簽在底部的簡(jiǎn)潔CSS選項(xiàng)卡