JS實現(xiàn)三級折疊菜單特效，其它級可自動收縮
更新時間：2015年08月06日 16:30:39 投稿：lijiao
這篇文章主要介紹了JS實現(xiàn)三級折疊菜單特效，其它級可自動收縮,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)三級折疊菜單特效，其它級可自動收縮。分享給大家供大家參考，很實用,在IE6、IE7、IE8、FF、chrome等瀏覽器都正常運行具體如下：
小貼士：去掉CSS中 #menu ul中 ｛height:100px; overflow:auto;｝ 即可高度自適應(yīng)
運行效果圖如下：
實現(xiàn)代碼如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三級折疊菜單</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)">+ 一級菜單A</a></a></h1>
<span class="no">
<h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 一級菜單A_1</a></a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 一級菜單A_2</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">+ 一級菜單A_3</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">+ 一級菜單A_4</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,4)"><a href="javascript:void(0)">+ 一級菜單A_5</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,5)"><a href="javascript:void(0)">+ 一級菜單A_6</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,6)"><a href="javascript:void(0)">+ 一級菜單A_7</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,7)"><a href="javascript:void(0)">+ 一級菜單A_8</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,8)"><a href="javascript:void(0)">+ 一級菜單A_9</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,9)"><a href="javascript:void(0)">+ 一級菜單A_10</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,10)"><a href="javascript:void(0)">+ 一級菜單A_11</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,11)"><a href="javascript:void(0)">+ 一級菜單A_12</a></h2>
<ul class="no">
<a href="javascript:void(0)">一級菜單A_0</a>
<a href="javascript:void(0)">一級菜單A_1</a>
<a href="javascript:void(0)">一級菜單A_2</a>
<a href="javascript:void(0)">一級菜單A_3</a>
<a href="javascript:void(0)">一級菜單A_4</a>
<a href="javascript:void(0)">一級菜單A_5</a>
<a href="javascript:void(0)">一級菜單A_6</a>
<a href="javascript:void(0)">一級菜單A_7</a>
<a href="javascript:void(0)">一級菜單A_8</a>
<a href="javascript:void(0)">一級菜單A_9</a>
</ul>
</span>
<h1 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二級菜單B</a></h1>
<span class="no">
<h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 二級菜單B_1</a></h2>
<ul class="no">
<a href="javascript:void(0)">二級菜單B_0</a>
<a href="javascript:void(0)">二級菜單B_1</a>
<a href="javascript:void(0)">二級菜單B_2</a>
<a href="javascript:void(0)">二級菜單B_3</a>
<a href="javascript:void(0)">二級菜單B_4</a>
<a href="javascript:void(0)">二級菜單B_5</a>
<a href="javascript:void(0)">二級菜單B_6</a>
<a href="javascript:void(0)">二級菜單B_7</a>
<a href="javascript:void(0)">二級菜單B_8</a>
<a href="javascript:void(0)">二級菜單B_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 二級菜單B_2</a></h2>
<ul class="no">
<a href="javascript:void(0)">二級菜單B_0</a>
<a href="javascript:void(0)">二級菜單B_1</a>
<a href="javascript:void(0)">二級菜單B_2</a>
<a href="javascript:void(0)">二級菜單B_3</a>
<a href="javascript:void(0)">二級菜單B_4</a>
<a href="javascript:void(0)">二級菜單B_5</a>
<a href="javascript:void(0)">二級菜單B_6</a>
<a href="javascript:void(0)">二級菜單B_7</a>
<a href="javascript:void(0)">二級菜單B_8</a>
<a href="javascript:void(0)">二級菜單B_9</a>
</ul>
</span>
<h1 onClick="javascript:ShowMenu(this,2)"><a href="javascript:void(0)">+ 三級菜單C</a></h1>
<span class="no">
<h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 三級菜單C_1</a></h2>
<ul class="no">
<a href="javascript:void(0)">三級菜單C_0</a>
<a href="javascript:void(0)">三級菜單C_1</a>
<a href="javascript:void(0)">三級菜單C_2</a>
<a href="javascript:void(0)">三級菜單C_3</a>
<a href="javascript:void(0)">三級菜單C_4</a>
<a href="javascript:void(0)">三級菜單C_5</a>
<a href="javascript:void(0)">三級菜單C_6</a>
<a href="javascript:void(0)">三級菜單C_7</a>
<a href="javascript:void(0)">三級菜單C_8</a>
<a href="javascript:void(0)">三級菜單C_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 三級菜單C_2</a></h2>
<ul class="no">
<a href="javascript:void(0)">三級菜單C_0</a>
<a href="javascript:void(0)">三級菜單C_1</a>
<a href="javascript:void(0)">三級菜單C_2</a>
<a href="javascript:void(0)">三級菜單C_3</a>
<a href="javascript:void(0)">三級菜單C_4</a>
<a href="javascript:void(0)">三級菜單C_5</a>
<a href="javascript:void(0)">三級菜單C_6</a>
<a href="javascript:void(0)">三級菜單C_7</a>
<a href="javascript:void(0)">三級菜單C_8</a>
<a href="javascript:void(0)">三級菜單C_9</a>
</ul>
</span>
<h1 onClick="javascript:ShowMenu(this,3)"><a href="javascript:void(0)">+ 四級菜單D</a></h1>
<span class="no">
<h2 onClick="javascript:ShowMenu(this,0)"><a href="javascript:void(0)">+ 四級菜單D_1</a></h2>
<ul class="no">
<a href="javascript:void(0)">四級菜單D_0</a>
<a href="javascript:void(0)">四級菜單D_1</a>
<a href="javascript:void(0)">四級菜單D_2</a>
<a href="javascript:void(0)">四級菜單D_3</a>
<a href="javascript:void(0)">四級菜單D_4</a>
<a href="javascript:void(0)">四級菜單D_5</a>
<a href="javascript:void(0)">四級菜單D_6</a>
<a href="javascript:void(0)">四級菜單D_7</a>
<a href="javascript:void(0)">四級菜單D_8</a>
<a href="javascript:void(0)">四級菜單D_9</a>
</ul>
<h2 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">+ 四級菜單D_2</a></h2>
<ul class="no">
<a href="javascript:void(0)">四級菜單D_0</a>
<a href="javascript:void(0)">四級菜單D_1</a>
<a href="javascript:void(0)">四級菜單D_2</a>
<a href="javascript:void(0)">四級菜單D_3</a>
<a href="javascript:void(0)">四級菜單D_4</a>
<a href="javascript:void(0)">四級菜單D_5</a>
<a href="javascript:void(0)">四級菜單D_6</a>
<a href="javascript:void(0)">四級菜單D_7</a>
<a href="javascript:void(0)">四級菜單D_8</a>
<a href="javascript:void(0)">四級菜單D_9</a>
</ul>
</span>
</div>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(一)
- Bootstrap打造一個左側(cè)折疊菜單的系統(tǒng)模板(二)
- 基于jQuery實現(xiàn)簡單的折疊菜單效果
- JS實現(xiàn)超簡單的仿QQ折疊菜單效果
- JS實現(xiàn)無限級網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼
- jQuery實現(xiàn)的簡單折疊菜單(折疊面板)效果代碼
- 微信小程序 省市區(qū)選擇器實例詳解(附源碼下載)
- 微信小程序 選擇器（時間，日期，地區(qū)）實例詳解
- jQuery中Find選擇器用法示例
- Bootstrap時間選擇器datetimepicker和daterangepicker使用實例解析
- 折疊菜單及選擇器的運用
相關(guān)文章
這篇文章主要為大家詳細介紹了小程序富文本提取圖片可放大縮小，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要為大家介紹了微信小程序事件綁定傳參冒泡及捕獲的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
我們在寫CSS的時候，會遇到大量相同的屬性(比如：margin-top:10px)這種屬性幾乎每個vue頁面都有。這個時候，我們可以把css掛載到全局上，供所有vue頁面使用，同時也方便修改。感興趣的同學(xué)可以參考一下2023-04-04
用JavaScript隱藏控件的方法有兩種，分別是通過設(shè)置控件的style的“display”和“visibility”屬性。2009-09-09
javascript的數(shù)組排序函數(shù) sort方法，默認是按照ASCII 字符順序進行升序排列。2009-08-08
javascript中tostring()和valueof()的用法及兩者的區(qū)別
基本上，所有JS數(shù)據(jù)類型都擁有valueOf和toString這兩個方法，null除外。它們倆解決javascript值運算與顯示的問題，本文給大家介紹javascript中tostring()和valueof()的用法及兩者的區(qū)別，對js tostring valueof相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-11-11
裝飾器模式（Decorator?Pattern）是一種結(jié)構(gòu)型設(shè)計模式，它允許動態(tài)地向一個對象添加新的行為，本文將帶大家詳細了解一下JavaScript裝飾器模式，文中有相關(guān)的示例代碼供大家參考，感興趣的同學(xué)可以跟著小編一起學(xué)習(xí)2023-05-05
JS/jQuery實現(xiàn)默認顯示部分文字點擊按鈕顯示全部內(nèi)容
默認顯示部分文字，點擊按鈕顯示全部，類似這樣的功能在一些特殊的地方會見到吧，下面與大家分享下JS、jQuery如何實現(xiàn)，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05
javascript表單驗證 - Parsley.js使用和配置
大家還記得我們曾經(jīng)介紹過的表單驗證jquery插件jquery.validationEngine吧;天介紹的Parsley同樣也可以幫助你只使用簡單的配置即可實現(xiàn)表單驗證功能，基于它的強大DOM-API,感興趣的你可以不要錯過了哦2013-01-01
本文主要介紹了js+css3實現(xiàn)旋轉(zhuǎn)效果的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01