三級摺疊菜單

時間  2019-12-06
標籤 三級 摺疊 菜單 简体版
原文   原文鏈接

<!DOCTYPE html>javascript

< html >
 
< head >
     < meta  http-equiv = "Content-Type"  content = "text/html; charset=gb2312"  />
     < title >CSS+JavaScript三級摺疊菜單</ title >
     < style >
         *,body,ul,li,h1,h2 {
     margin: 0;
     padding: 0;
     list-style: none;
}
 
body {
     font: 12px "宋體";
     padding-top: 20px;
}
 
#menu {
     width: 200px;
     margin: auto;
}
 
#menu h1 {
     cursor: pointer;
     color: #FFF;
     font-size: 12px;
     padding: 5px 0 3px 10px;
     border: #C60 1px solid;
     margin-top: 1px;
     #F93;
}
 
#menu h2 {
     cursor: pointer;
     color: #777;
     font-size: 12px;
     padding: 5px 0 3px 10px;
     border: #E7E7E7 1px solid;
     border-top-color: #FFF;
     #F4F4F4;
}
 
#menu ul {
     padding-left: 15px;
     height: 100px;
     border: #E7E7E7 1px solid;
     border-top: none;
     overflow: auto;
}
 
#menu ul li {
     padding: 5px 0 3px 10px;
}
 
.no {
     display: none;
}
     </ style >
     < script  language = "JavaScript" >
         <!--//
         function ShowMenu(obj, noid) {
             var block = document.getElementById(noid);
             var n = noid.substr(noid.length - 1);
             if (noid.length == 4) {
                 var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul");
                 var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2");
                 for (var i = 0; i < h2.length; i++) {
                     h2[i].innerHTML = h2[i].innerHTML.replace("+", "-");
                     h2[i].style.color = "";
                 }
                 obj.style.color = "#FF0000";
                 for (var i = 0; i < ul.length; i++) {
                     if (i != n) {
                         ul[i].className = "no";
                     }
                 }
             } else {
                 var span = document.getElementById("menu").getElementsByTagName("span");
                 var h1 = document.getElementById("menu").getElementsByTagName("h1");
                 for (var i = 0; i < h1.length; i++) {
                     h1[i].innerHTML = h1[i].innerHTML.replace("+", "-");
                     h1[i].style.color = "";
                 }
                 obj.style.color = "#0000FF";
                 for (var i = 0; i < span.length; i++) {
                     if (i != n) {
                         span[i].className = "no";
                     }
                 }
             }
             if (block.className == "no") {
                 block.className = "";
                 obj.innerHTML = obj.innerHTML.replace("-", "+");
             } else {
                 block.className = "no";
                 obj.style.color = "";
             }
         }
          //-->
     </ script >
</ head >
 
< body >
     < div  id = "menu" >
         < h1  onClick = "javascript:ShowMenu(this,'NO0')" > - 一級菜單A</ h1 >
         < span  id = "NO0"  class = "no" >
    < h2  onClick = "javascript:ShowMenu(this,'NO00')" > - 一級菜單A_1</ h2 >
    < ul  id = "NO00"  class = "no" >
     < li >一級菜單A_0</ li >
     < li >一級菜單A_1</ li >
     < li >一級菜單A_2</ li >
     < li >一級菜單A_3</ li >
     < li >一級菜單A_4</ li >
     < li >一級菜單A_5</ li >
    </ ul >
    < h2  onClick = "javascript:ShowMenu(this,'NO01')" > - 一級菜單A_2</ h2 >
    < ul  id = "NO01"  class = "no" >
     < li >一級菜單A_0</ li >
     < li >一級菜單A_1</ li >
     < li >一級菜單A_2</ li >
     < li >一級菜單A_3</ li >
     < li >一級菜單A_4</ li >
    </ ul >
    < h2  onClick = "javascript:ShowMenu(this,'NO02')" > - 一級菜單A_3</ h2 >
    < ul  id = "NO02"  class = "no" >
     < li >一級菜單A_0</ li >
     < li >一級菜單A_1</ li >
     < li >一級菜單A_2</ li >
     < li >一級菜單A_3</ li >
     < li >一級菜單A_4</ li >
     < li >一級菜單A_5</ li >
     < li >一級菜單A_6</ li >
    </ ul >
    < h2  onClick = "javascript:ShowMenu(this,'NO03')" > - 一級菜單A_4</ h2 >
    < ul  id = "NO03"  class = "no" >
     < li >一級菜單A_0</ li >
     < li >一級菜單A_1</ li >
     < li >一級菜單A_2</ li >
     < li >一級菜單A_3</ li >
     < li >一級菜單A_4</ li >
     < li >一級菜單A_5</ li >
     < li >一級菜單A_6</ li >
     < li >一級菜單A_7</ li >
    </ ul >
</ span >
         < h1  onClick = "javascript:ShowMenu(this,'NO1')" > - 二級菜單B</ h1 >
         < span  id = "NO1"  class = "no" >
    < h2  onClick = "javascript:ShowMenu(this,'NO10')" > - 二級菜單B_1</ h2 >
    < ul  id = "NO10"  class = "no" >
     < li >二級菜單B_0</ li >
     < li >二級菜單B_1</ li >
     < li >二級菜單B_2</ li >
     < li >二級菜單B_3</ li >
     < li >二級菜單B_4</ li >
     < li >二級菜單B_5</ li >
     < li >二級菜單B_6</ li >
     < li >二級菜單B_7</ li >
    </ ul >
    < h2  onClick = "javascript:ShowMenu(this,'NO11')" > - 二級菜單B_2</ h2 >
    < ul  id = "NO11"  class = "no" >
     < li >二級菜單B_0</ li >
     < li >二級菜單B_1</ li >
     < li >二級菜單B_2</ li >
     < li >二級菜單B_3</ li >
     < li >二級菜單B_4</ li >
     < li >二級菜單B_5</ li >
     < li >二級菜單B_6</ li >
     < li >二級菜單B_7</ li >
    </ ul >
</ span >
         < h1  onClick = "javascript:ShowMenu(this,'NO2')" > - 三級菜單C</ h1 >
         < span  id = "NO2"  class = "no" >
    < h2  onClick = "javascript:ShowMenu(this,'NO20')" > - 三級菜單C_1</ h2 >
    < ul  id = "NO20"  class = "no" >
     < li >三級菜單C_0</ li >
     < li >三級菜單C_1</ li >
     < li >三級菜單C_2</ li >
     < li >三級菜單C_3</ li >
     < li >三級菜單C_4</ li >
     < li >三級菜單C_5</ li >
     < li >三級菜單C_6</ li >
     < li >三級菜單C_7</ li >
     < li >三級菜單C_8</ li >
     < li >三級菜單C_9</ li >
    </ ul >
    < h2  onClick = "javascript:ShowMenu(this,'NO21')" > - 三級菜單C_2</ h2 >
    < ul  id = "NO21"  class = "no" >
     < li >三級菜單C_0</ li >
     < li >三級菜單C_1</ li >
     < li >三級菜單C_2</ li >
     < li >三級菜單C_3</ li >
     < li >三級菜單C_4</ li >
    </ ul >
</ span >
         < h1  onClick = "javascript:ShowMenu(this,'NO3')" > - 四級菜單D</ h1 >
         < span  id = "NO3"  class = "no" >
    < h2  onClick = "javascript:ShowMenu(this,'NO30')" > - 四級菜單D_1</ h2 >
    < ul  id = "NO30"  class = "no" >
     < li >四級菜單D_0</ li >
     < li >四級菜單D_1</ li >
     < li >四級菜單D_2</ li >
     < li >四級菜單D_3</ li >
    </ ul >
    < h2  onClick = "javascript:ShowMenu(this,'NO31')" > - 四級菜單D_2</ h2 >
    < ul  id = "NO31"  class = "no" >
     < li >四級菜單D_0</ li >
     < li >四級菜單D_1</ li >
     < li >四級菜單D_2</ li >
     < li >四級菜單D_3</ li >
     < li >四級菜單D_4</ li >
     < li >四級菜單D_5</ li >
    </ ul >
</ span >
     </ div >
</ body >
 
</ html >
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程