zoukankan      html  css  js  c++  java
  • 三级折叠菜单和二级折叠菜单....无限级树形菜单

    #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;}
    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("-", "+");
        }
    }
    <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>

     -------------------------------------------------------------------------------

    下面为二级折叠菜单

    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).addClass("Navleft1");
            //obj.innerHTML = obj.innerHTML.replace("+", "-");
        } else {
            BName[n].className = "no";
            obj.className = "";
            //obj.innerHTML = obj.innerHTML.replace("-", "+"); //一级菜单折叠时
        }
    }
    #Nav_left { width:100%; margin:auto;padding-bottom:10px; background:#f5f5f5;}
     #Nav_left h1 { border-bottom:#e3e3e3 1px solid; margin-top:1px; }
     #Nav_left h1 a { background:url(../images/jia.png) no-repeat   30px center;font-size:16px; display:inline-block; padding:0px 0 0px 50px;height:40px;line-height:40px; text-decoration:none; overflow:hidden;color:#545454}
     #Nav_left h1 a:hover{ color:#f77801;}
      #Nav_left h1.Navleft1 a{color:#f77801;background:url(../images/jia1.png) no-repeat   30px center}
     
     #Nav_left .no {display:none;}
     #Nav_left .h1 a{color:#333;}
      #Nav_left ul { padding-left:60px; overflow:auto;border-bottom:1px solid #e3e3e3}
      #Nav_left ul li {height:30px;line-height:30px}
     #Nav_left ul li a{background:url(../images/dotted.jpg) no-repeat  left center;line-height:30px;padding-left:10px}
     #Nav_left ul li a:hover{color:#f77801;background:url(../images/dottedred.jpg) no-repeat  left center;}
     
    <div id="Nav_left">
     <h1 onClick="javascript:ShowMenu(this,0)" ><a href="javascript:void(0)" >一级菜单A</a></h1>
     <span class="no">
     <ul>
     <li><a href="">一级菜单A_1</a></li>
     <li><a href="">一级菜单A_1</a></li>
     </ul>
     </span>
      <h1 onClick="javascript:ShowMenu(this,1)"><a href="javascript:void(0)">一级菜单A</a></h1>
       <span class="no">
      <ul>
     <li><a href="">一级菜单A_1</a></li>
     <li><a href="">一级菜单A_1</a></li>
     </ul>
     </span>
    </div>

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>无限级折叠菜单 1.01 JS版</title> 
    <meta name="keywords" content="hj1227 原创无限级折叠菜单 1.01js版"> 
    <meta name="description" content="hj1227 原创无限级折叠菜单 1.01js版"> 
    <style> 
    <!-- 
    body,ul,h3 {margin:0px; padding:0px;} 
    li {list-style-type:none;} 
    body{ 
    font-size:12px; 
    color:#333; 
    font-family: Simsun; 
    line-height:15px; 
    } 
    a{text-decoration:none;color:#004285;border:none;} 
    a:hover{text-decoration:none;color:#C33;} 
    #menu { 
    width:260px; 
    margin:50px auto; 
    padding:10px; 
    border:#EEE 1px solid; 
    } 
    #menu h3 { 
    font-size:12px; 
    } 
    #menu ul { 
    background:url("http://demo.jb51.net/js/2011/caidan/ul-bg.gif") repeat-y 5px 0px; overflow:hidden; 
    } 
    #menu ul li { 
    padding:5px 0 2px 15px; 
    background:url("http://demo.jb51.net/js/2011/caidan/tree-ul-li.gif") no-repeat 5px -32px; 
    } 
    #menu ul li ul {display:none;} 
    #menu ul li em { 
    cursor:pointer; 
    display:inline-block; 
    width:15px; 
    float:left; 
    height:15px; 
    margin-left:-14px; 
    background:url("http://demo.jb51.net/js/2011/caidan/tree-ul-li.gif") no-repeat -32px 2px; 
    } 
    #menu ul li em.off { 
    background-position: -17px -18px; 
    } 
    #menu ul li#end { 
    background-color:#FFF; 
    } 
    #menu ul.off { 
    display:block; 
    } 
    --> 
    </style> 
    </head> 
    <body> 
    <div id="menu"> 
    <h3>无限级折叠菜单 1.0.1 JS版</h3> 
    
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_1_1</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_2_1</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_3_1</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_4_1</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_4_1</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_2_2</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_3_1</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_4_1</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_4_1</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_1_2</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_2_1</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_3_1</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_4_1</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_4_1</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_2_2</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_3_1</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_4_1</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> 
    <ul> 
    <li><em></em><a href='javascript:void(0);'>菜单_4_1</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> 
    <ul> 
    <li><a href='javascript:void(0);'>菜单_5_1</a></li> 
    <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    </ul> 
    
    </li> 
    </ul> 
    </div> 
    <script type="text/javascript"> 
    (function(e){ 
    for(var _obj=document.getElementById(e.id).getElementsByTagName(e.tag),i=-1,em;em=_obj[++i];){ 
    em.onclick = function(){ //onmouseover 
    var ul = this.nextSibling; 
    if(!ul){return false;} 
    ul = ul.nextSibling; if(!ul){return false;} 
    if(e.tag != 'a'){ ul = ul.nextSibling; if(!ul){return false;} } //a 标签控制 隐藏或删除该行 
    for(var _li=this.parentNode.parentNode.childNodes,n=-1,li;li=_li[++n];){ 
    if(li.tagName=="LI"){ 
    for(var _ul=li.childNodes,t=-1,$ul;$ul=_ul[++t];){ 
    switch($ul.tagName){ 
    case "UL": 
    $ul.className = $ul!=ul?"" : ul.className?"":"off"; 
    break; 
    case "EM": 
    $ul.className = $ul!=this?"" : this.className?"":"off"; 
    break; 
    } 
    } 
    } 
    } 
    } 
    } 
    })({id:'menu',tag:'em'}); 
    </script> 
    </body> 
    </html> 
  • 相关阅读:
    ECharts之柱状图 饼状图 折线图
    Vue自定义指令(directive)
    HDU 1231 最大连续子序列
    POJ 2533 Longest Ordered Subsequence
    HDU 1163 Eddy's digital Roots
    HDU 2317 Nasty Hacks
    HDU 2571 命运
    HDU 4224 Enumeration?
    HDU 1257 最少拦截系统
    HDU 2740 Root of the Problem
  • 原文地址:https://www.cnblogs.com/qigege/p/5178947.html
Copyright © 2011-2022 走看看