JS implémente un menu pliable de pages Web infini (similaire au menu arborescent) avec effet de compétences code

JS implémente un menu pliable de pages Web infini (similaire au menu arborescent) avec effet de compétences code_javascript

WBOY

Libérer： 2016-05-16 15:38:59

original

1535 Les gens l'ont consulté

L'exemple de cet article décrit le code JS pour réaliser l'effet d'un menu pliable de page Web infini (similaire au menu arborescent). Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un très bon menu pliable de page Web, implémenté en JavaScript. Le menu pliant est une forme de menu courante que tout le monde voit. Il peut être largement utilisé dans les systèmes de gestion, le côté gauche du backend et les listes de produits. Ce menu pliant a un peu un menu arborescent. répondra à vos exigences.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

<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>

Copier après la connexion

J'espère que cet article sera utile à la programmation JavaScript de chacun.