Einfacher Falt- und Erweiterungseffekt für mehrstufige Menüs, implementiert durch JS CSS

Einfacher Falt- und Erweiterungseffekt für mehrstufige Menüs, implementiert durch JS CSS_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:39:46

Original

1776 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den faltbaren und erweiterten mehrstufigen Menüeffekt, der von JS CSS implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein in JS CSS implementiertes mehrstufiges Faltmenü, das gefaltet, erweitert oder reduziert werden kann. Es verweist nicht auf externe Dateien und verwendet keine Bilder, obwohl es einfach und etwas grob ist Ihnen wurden die Dinge gezeigt, Freunde, die das zusammenklappbare Menü studieren. Dieses kleine Beispiel könnte genau das sein, was Sie brauchen. Studieren Sie es sorgfältig.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>折叠菜单</title>
<style>
#side_nav ul{display:none}
</style>
</head>
<body>
<ul id="side_nav">
 <li><span>菜单1</span>
  <ul>
   <li><a href="#">菜单1-0</a></li>
   <li><a href="#">菜单1-1</a></li>
  </ul>
 </li>
 <li><span>菜单2</span>
  <ul>
   <li><a href="#">菜单2-0</a></li>
   <li><a href="#">菜单2-1</a></li>
  </ul>
 </li>
 <li><span>菜单3</span>
  <ul>
   <li><a href="#">菜单3-0</a></li>
  </ul>
 </li>
</ul>
<script type="text/javascript">
<!--
 (function(){
  var navWrap=document.getElementById("side_nav");
  var nav1s=navWrap.getElementsByTagName("span");
  var nav2s=navWrap.getElementsByTagName("ul");
  for(var i=0,len=nav1s.length;i<len;i++){
   nav1s[i].onclick=(function(i){
    return function(){
     for(var j=0;j<len;j++){
      nav2s[j].style.display="none";
     }
     nav2s[i].style.display="block";
    }
   })(i)
  }
 })()
//-->
</script>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung aller hilfreich sein wird.