recherche

Maison >interface Web >js tutoriel >Effet de menu simple à plusieurs niveaux de pliage et d'expansion implémenté par les compétences JS CSS_javascript

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

WBOY
WBOYoriginal
2016-05-16 15:39:461835parcourir

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Partage de code de loterie de roulette mobile_Compétences JavascriptArticle suivant：Partage de code de loterie de roulette mobile_Compétences Javascript

Articles Liés

Voir plus