Heim > Artikel > Web-Frontend > Einfacher Falt- und Erweiterungseffekt für mehrstufige Menüs, implementiert durch JS CSS_Javascript-Kenntnisse

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

WBOYOriginal: 2016-05-16 15:39:461779Durchsuche

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Mobile Roulette-Lotterie-Code-Sharing_Javascript-KenntnisseNächster Artikel：Mobile Roulette-Lotterie-Code-Sharing_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen