Effet de menu simple à plusieurs niveaux de pliage et d'expansion implémenté par les compétences JS CSS

Effet de menu simple à plusieurs niveaux de pliage et d'expansion implémenté par les compétences JS CSS_javascript

WBOY

Libérer： 2016-05-16 15:39:46

original

1789 Les gens l'ont consulté

L'exemple de cet article décrit l'effet de menu multi-niveaux pliable et étendu implémenté par JS CSS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu pliant à plusieurs niveaux implémenté dans JS CSS, qui peut être plié, développé ou réduit. Il ne fait référence à aucun fichier externe et n'utilise pas d'images. Bien qu'il soit simple et un peu approximatif, le noyau. des choses vous ont été montrées. Tout le monde, amis qui étudient le menu réduit, ce petit exemple est peut-être exactement ce dont vous avez besoin, étudiez-le attentivement.

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-css-simple-zdzk-menu-style-codes/

Le code spécifique est le suivant :

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

Copier après la connexion

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