JS实现无限级网页折叠菜单(类似树形菜单)

2021-07-01 09:06

阅读:357

标签:point   oat   hidden   play   tag   cas   padding   off   cli   

html>
head>
title>无限级折叠菜单JS版title>
style> 

style>
head>
body>
div id="menu">
 h3>无限级折叠菜单JavaScript版h3>
 ul>
 li>em>em>a href=‘javascript:void(0);‘>菜单_1_1a>
 ul>
  li>em>em>a href=‘javascript:void(0);‘>菜单_2_1a>
  ul>
  li>em>em>a href=‘javascript:void(0);‘>菜单_3_1a>
  ul>
   li>em>em>a href=‘javascript:void(0);‘>菜单_4_1a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
   li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_4_2a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
  ul>
  li>
  li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_3_2a>
  ul>
   li>em>em>a href=‘javascript:void(0);‘>菜单_4_1a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
   li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_4_2a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
  ul>
  li>
  ul>
  li>
  li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_2_2a>
  ul>
  li>em>em>a href=‘javascript:void(0);‘>菜单_3_1a>
  ul>
   li>em>em>a href=‘javascript:void(0);‘>菜单_4_1a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
   li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_4_2a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
  ul>
  li>
  li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_3_2a>
  ul>
   li>em>em>a href=‘javascript:void(0);‘>菜单_4_1a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
   li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_4_2a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
  ul>
  li>
  ul>
  li>
 ul>
 li>
 li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_1_2a>
 ul>
  li>em>em>a href=‘javascript:void(0);‘>菜单_2_1a>
  ul>
  li>em>em>a href=‘javascript:void(0);‘>菜单_3_1a>
  ul>
   li>em>em>a href=‘javascript:void(0);‘>菜单_4_1a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
   li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_4_2a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
  ul>
  li>
  li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_3_2a>
  ul>
   li>em>em>a href=‘javascript:void(0);‘>菜单_4_1a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
   li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_4_2a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
  ul>
  li>
  ul>
  li>
  li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_2_2a>
  ul>
  li>em>em>a href=‘javascript:void(0);‘>菜单_3_1a>
  ul>
   li>em>em>a href=‘javascript:void(0);‘>菜单_4_1a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
   li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_4_2a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
  ul>
  li>
  li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_3_2a>
  ul>
   li>em>em>a href=‘javascript:void(0);‘>菜单_4_1a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>li>
   ul>
   li>
   li id=‘end‘>em>em>a href=‘javascript:void(0);‘>菜单_4_2a>
   ul>
   li>a href=‘javascript:void(0);‘>菜单_5_1a>li>
   li id=‘end‘>a href=‘javascript:void(0);‘>菜单_5_2a>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>

 

JS实现无限级网页折叠菜单(类似树形菜单)

标签:point   oat   hidden   play   tag   cas   padding   off   cli   

原文地址:http://www.cnblogs.com/hopelooking/p/7133371.html


评论


亲,登录后才可以留言!