zoukankan      html  css  js  c++  java
  • js 菜单的展开收起

    <html>
    <head>
    <title>无限级折叠菜单JS版</title>
    <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 {
     260px;
     margin:50px auto; 
     padding:10px; 
     border:#EEE 1px solid;
     }
     #menu h3 {
      font-size:12px;
     }
     #menu ul { 
      background:url("images/ul-bg.gif") repeat-y 5px 0px; overflow:hidden;
     }
     #menu ul li {
      padding:5px 0 2px 15px; 
      background:url("images/tree-ul-li.gif") no-repeat 5px -32px; 
     }
     #menu ul li ul {display:none;}
     #menu ul li em {
      cursor:pointer;
      display:inline-block;
      15px;
      float:left;
      height:15px;
      margin-left:-14px;
      background:url("images/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 data-ext-version="3.1">
    <div id="menu">
     <h3>无限级折叠菜单JavaScript版</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>
    

     图片如下

     

  • 相关阅读:
    登录模块(前端bookstrapValidator校验+加密+后台加密+后台验证)
    spring+springmvc+mybatis+redis 实现两重数据缓存
    spring+springmvc+mybatis+redis实现缓存
    获取网页上的所有QQ号码,并生成exel报表
    单点登录(因为原理一样,所以没有实现注销)
    solr 基本命令二(权重查找)
    solr 搭建 (基于solr-5.0.0)
    OC 添加导航栏item
    xcode 一些三方库版本警告 iOS Simulator deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.2.99.
    Swift UITextView设置富文本点击, 取消一切点击事件(放大镜/复制粘贴/删除等等)
  • 原文地址:https://www.cnblogs.com/whl4835349/p/13173114.html
Copyright © 2011-2022 走看看