亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JS實(shí)現(xiàn)三級(jí)折疊菜單特效，其它級(jí)可自動(dòng)收縮

 更新時(shí)間：2015年08月06日 16:30:39   投稿：lijiao  
這篇文章主要介紹了JS實(shí)現(xiàn)三級(jí)折疊菜單特效，其它級(jí)可自動(dòng)收縮,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)三級(jí)折疊菜單特效，其它級(jí)可自動(dòng)收縮。分享給大家供大家參考，很實(shí)用,在IE6、IE7、IE8、FF、chrome等瀏覽器都正常運(yùn)行具體如下：
小貼士：去掉CSS中 #menu ul中 ｛height:100px; overflow:auto;｝ 即可高度自適應(yīng)
運(yùn)行效果圖如下：

實(shí)現(xiàn)代碼如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三級(jí)折疊菜單</title>
<style>
*,body,ul,h1,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋體"; padding-top:20px;}
a{ color:#777;border:none;}
#menu { width:200px; margin:auto;}
 #menu h1 { font-size:12px; border:#C60 1px solid; margin-top:1px; background-color:#F93;}
 #menu h2 { font-size:12px; border:#E7E7E7 1px solid; border-top-color:#FFF; background-color:#F4F4F4;}
 #menu ul { padding-left:15px; height:100px;border:#E7E7E7 1px solid; border-top:none;overflow:auto;}
 #menu a { display:block; padding:5px 0 3px 10px; text-decoration:none; overflow:hidden;}
 #menu a:hover{ color:#6F0; background:#000;}
 #menu .no {display:none;}
 #menu .h1 a{color:#6F0;}
 #menu .h2 a{color:#06F;}
 #menu h1 a{color:#FFF;}
</style>
<script language="JavaScript">
<!--//
function ShowMenu(obj,n){
 var Nav = obj.parentNode;
 if(!Nav.id){
 var BName = Nav.getElementsByTagName("ul");
 var HName = Nav.getElementsByTagName("h2");
 var t = 2;
 }else{
 var BName = document.getElementById(Nav.id).getElementsByTagName("span");
 var HName = document.getElementById(Nav.id).getElementsByTagName("h1");
 var t = 1;
 }
 for(var i=0; i<HName.length;i++){
 HName[i].innerHTML = HName[i].innerHTML.replace("-","+");
 HName[i].className = "";
 }
 obj.className = "h" + t;
 for(var i=0; i<BName.length; i++){if(i!=n){BName[i].className = "no";}}
 if(BName[n].className == "no"){
 BName[n].className = "";
 obj.innerHTML = obj.innerHTML.replace("+","-");
 }else{
 BName[n].className = "no";
 obj.className = "";
 obj.innerHTML = obj.innerHTML.replace("-","+");
 }
}
//-->
</script>
</head>
<body>
<div id="menu">
 <h1 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一級(jí)菜單A</a></a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一級(jí)菜單A_1</a></a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 一級(jí)菜單A_2</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">+ 一級(jí)菜單A_3</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">+ 一級(jí)菜單A_4</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,4)"><a href="javascript:void(0)">+ 一級(jí)菜單A_5</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,5)"><a href="javascript:void(0)">+ 一級(jí)菜單A_6</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,6)"><a href="javascript:void(0)">+ 一級(jí)菜單A_7</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,7)"><a href="javascript:void(0)">+ 一級(jí)菜單A_8</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,8)"><a href="javascript:void(0)">+ 一級(jí)菜單A_9</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,9)"><a href="javascript:void(0)">+ 一級(jí)菜單A_10</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,10)"><a href="javascript:void(0)">+ 一級(jí)菜單A_11</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,11)"><a href="javascript:void(0)">+ 一級(jí)菜單A_12</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">一級(jí)菜單A_0</a>
  <a href="javascript:void(0)">一級(jí)菜單A_1</a>
  <a href="javascript:void(0)">一級(jí)菜單A_2</a>
  <a href="javascript:void(0)">一級(jí)菜單A_3</a>
  <a href="javascript:void(0)">一級(jí)菜單A_4</a>
  <a href="javascript:void(0)">一級(jí)菜單A_5</a>
  <a href="javascript:void(0)">一級(jí)菜單A_6</a>
  <a href="javascript:void(0)">一級(jí)菜單A_7</a>
  <a href="javascript:void(0)">一級(jí)菜單A_8</a>
  <a href="javascript:void(0)">一級(jí)菜單A_9</a>
 </ul>
 </span>
    
 <h1 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二級(jí)菜單B</a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 二級(jí)菜單B_1</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">二級(jí)菜單B_0</a>
  <a href="javascript:void(0)">二級(jí)菜單B_1</a>
  <a href="javascript:void(0)">二級(jí)菜單B_2</a>
  <a href="javascript:void(0)">二級(jí)菜單B_3</a>
  <a href="javascript:void(0)">二級(jí)菜單B_4</a>
  <a href="javascript:void(0)">二級(jí)菜單B_5</a>
  <a href="javascript:void(0)">二級(jí)菜單B_6</a>
  <a href="javascript:void(0)">二級(jí)菜單B_7</a>
  <a href="javascript:void(0)">二級(jí)菜單B_8</a>
  <a href="javascript:void(0)">二級(jí)菜單B_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二級(jí)菜單B_2</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">二級(jí)菜單B_0</a>
  <a href="javascript:void(0)">二級(jí)菜單B_1</a>
  <a href="javascript:void(0)">二級(jí)菜單B_2</a>
  <a href="javascript:void(0)">二級(jí)菜單B_3</a>
  <a href="javascript:void(0)">二級(jí)菜單B_4</a>
  <a href="javascript:void(0)">二級(jí)菜單B_5</a>
  <a href="javascript:void(0)">二級(jí)菜單B_6</a>
  <a href="javascript:void(0)">二級(jí)菜單B_7</a>
  <a href="javascript:void(0)">二級(jí)菜單B_8</a>
  <a href="javascript:void(0)">二級(jí)菜單B_9</a>
 </ul>
 </span>
  
 <h1 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">+ 三級(jí)菜單C</a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 三級(jí)菜單C_1</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">三級(jí)菜單C_0</a>
  <a href="javascript:void(0)">三級(jí)菜單C_1</a>
  <a href="javascript:void(0)">三級(jí)菜單C_2</a>
  <a href="javascript:void(0)">三級(jí)菜單C_3</a>
  <a href="javascript:void(0)">三級(jí)菜單C_4</a>
  <a href="javascript:void(0)">三級(jí)菜單C_5</a>
  <a href="javascript:void(0)">三級(jí)菜單C_6</a>
  <a href="javascript:void(0)">三級(jí)菜單C_7</a>
  <a href="javascript:void(0)">三級(jí)菜單C_8</a>
  <a href="javascript:void(0)">三級(jí)菜單C_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 三級(jí)菜單C_2</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">三級(jí)菜單C_0</a>
  <a href="javascript:void(0)">三級(jí)菜單C_1</a>
  <a href="javascript:void(0)">三級(jí)菜單C_2</a>
  <a href="javascript:void(0)">三級(jí)菜單C_3</a>
  <a href="javascript:void(0)">三級(jí)菜單C_4</a>
  <a href="javascript:void(0)">三級(jí)菜單C_5</a>
  <a href="javascript:void(0)">三級(jí)菜單C_6</a>
  <a href="javascript:void(0)">三級(jí)菜單C_7</a>
  <a href="javascript:void(0)">三級(jí)菜單C_8</a>
  <a href="javascript:void(0)">三級(jí)菜單C_9</a>
 </ul>
 </span>
  
 <h1 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">+ 四級(jí)菜單D</a></h1>
 <span class="no">
 <h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 四級(jí)菜單D_1</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">四級(jí)菜單D_0</a>
  <a href="javascript:void(0)">四級(jí)菜單D_1</a>
  <a href="javascript:void(0)">四級(jí)菜單D_2</a>
  <a href="javascript:void(0)">四級(jí)菜單D_3</a>
  <a href="javascript:void(0)">四級(jí)菜單D_4</a>
  <a href="javascript:void(0)">四級(jí)菜單D_5</a>
  <a href="javascript:void(0)">四級(jí)菜單D_6</a>
  <a href="javascript:void(0)">四級(jí)菜單D_7</a>
  <a href="javascript:void(0)">四級(jí)菜單D_8</a>
  <a href="javascript:void(0)">四級(jí)菜單D_9</a>
 </ul>
 <h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 四級(jí)菜單D_2</a></h2>
 <ul class="no">
  <a href="javascript:void(0)">四級(jí)菜單D_0</a>
  <a href="javascript:void(0)">四級(jí)菜單D_1</a>
  <a href="javascript:void(0)">四級(jí)菜單D_2</a>
  <a href="javascript:void(0)">四級(jí)菜單D_3</a>
  <a href="javascript:void(0)">四級(jí)菜單D_4</a>
  <a href="javascript:void(0)">四級(jí)菜單D_5</a>
  <a href="javascript:void(0)">四級(jí)菜單D_6</a>
  <a href="javascript:void(0)">四級(jí)菜單D_7</a>
  <a href="javascript:void(0)">四級(jí)菜單D_8</a>
  <a href="javascript:void(0)">四級(jí)菜單D_9</a>
 </ul>
 </span>
</div>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • 如何改進(jìn)javascript代碼的性能

    如何改進(jìn)javascript代碼的性能

    在web應(yīng)用中，應(yīng)用了大量的Javascript，因此代碼的執(zhí)行效率變得尤為重要，也就是性能！為了提高JS的性能，我們應(yīng)該掌握一些基本的性能優(yōu)化方式，并讓它成為我們書(shū)寫(xiě)代碼的習(xí)慣。下面介紹幾種優(yōu)化性能的方式，很多初學(xué)者甚至有經(jīng)驗(yàn)的開(kāi)發(fā)者也會(huì)忽略，希望對(duì)你有幫助
    2015-04-04
  • 在TypeScript中泛型的使用方法及場(chǎng)景

    在TypeScript中泛型的使用方法及場(chǎng)景

    泛型是TypeScript中的一個(gè)強(qiáng)大特性,它可以增加代碼的靈活性和安全性,在本文中,我將向您介紹泛型的使用方法和場(chǎng)景,并展示如何使用類型約束,需要的朋友可以參考下
    2023-08-08
  • avascript中的自執(zhí)行匿名函數(shù)應(yīng)用示例

    avascript中的自執(zhí)行匿名函數(shù)應(yīng)用示例

    javascript中的自執(zhí)行匿名函數(shù)可以用它創(chuàng)建命名空間，只要把自己所有的代碼都寫(xiě)在這個(gè)特殊的函數(shù)包裝內(nèi)，那么外部就不能訪問(wèn)，除非你允許
    2014-09-09
  • js實(shí)現(xiàn)雙擊單元格變成文本輸入框效果代碼

    js實(shí)現(xiàn)雙擊單元格變成文本輸入框效果代碼

    單擊單元格，即可將其變?yōu)槲谋究?，方便編輯測(cè)試
    2008-04-04
  • javascript實(shí)用小函數(shù)使用介紹

    javascript實(shí)用小函數(shù)使用介紹

    本文整理了一些實(shí)用小函數(shù)如阻止輸入非數(shù)字，backspace除外；限制輸入最大字符串長(zhǎng)度等，需要的朋友可以了解下
    2013-11-11
  • elementui上傳圖片回顯功能實(shí)現(xiàn)

    elementui上傳圖片回顯功能實(shí)現(xiàn)

    這篇文章主要介紹了elementui上傳圖片回顯,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-07-07
  • JavaScript解析URL參數(shù)示例代碼

    JavaScript解析URL參數(shù)示例代碼

    通過(guò)js解析URL參數(shù)，本文創(chuàng)建了一個(gè)js類，并引用Request.QueryString，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
    2013-08-08
  • javascript制作的cookie封裝及使用指南

    javascript制作的cookie封裝及使用指南

    這篇文章主要介紹了javascript制作的cookie封裝及使用指南,需要的朋友可以參考下
    2015-01-01
  • 在vscode上直接運(yùn)行typescript的操作方法

    在vscode上直接運(yùn)行typescript的操作方法

    在學(xué)習(xí)typescript的過(guò)程中發(fā)現(xiàn)在vscode上不能很好地的輸出typescript的運(yùn)行結(jié)果,需要先將typescript編譯為javascript,在通過(guò)node執(zhí)行js文件得到結(jié)果,這篇文章給大家介紹如何在vscode上直接運(yùn)行typescript,感興趣的朋友一起看看吧
    2023-12-12
  • 實(shí)例解析Array和String方法

    實(shí)例解析Array和String方法

    本文主要對(duì)Array和String方法進(jìn)行總結(jié)，每一部分總結(jié)后有實(shí)例代碼，代碼中黃色框方法不改變?cè)瓟?shù)組。PS:所有實(shí)例結(jié)果均一一運(yùn)行所得。具有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧
    2016-12-12

最新評(píng)論