JS implements infinite web page folding menu (similar to tree menu) effect code

JS implements infinite web page folding menu (similar to tree menu) effect code_javascript skills

WBOY

Release： 2016-05-16 15:38:59

Original

1513 people have browsed it

The example in this article describes the JS code to realize the effect of infinite web page folding menu (similar to tree menu). Share it with everyone for your reference. The details are as follows:

This is a super good web page folding menu, implemented in JavaScript. The folding menu is a common menu form that everyone sees. It can be widely used in management systems, the left side of the backend, and product lists. This folding menu has a bit of a tree menu. I believe that "infinite levels" will meet your requirements.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/

The specific code is as follows:

<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 {
 width: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;
 width: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>
<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&#63;"" : ul.className&#63;"":"off";
   break;
   case "EM":
    $ul.className = $ul!=this&#63;"" : this.className&#63;"":"off";
   break;
   }
   }
  }
  }
 }
 }
})({id:'menu',tag:'em'});
</script>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming.