Implémentation d'une extension et d'un repli en accordéon du menu de navigation basé sur jQuery

Implémentation d'une extension et d'un repli en accordéon du menu de navigation basé sur jQuery_jquery

WBOY

Libérer： 2016-05-16 15:17:09

original

1300 Les gens l'ont consulté

Ce chapitre partage un exemple de code qui implémente l'effet d'expansion et de réduction du menu de navigation en mode accordéon.

L'exemple de code est le suivant :

代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style>
dl{width:150px;}
dl,dd{margin:0;}
dt{
 background:gray;
 font-size:14px;
 padding:2px;
 margin:2px;
}
dt{color:#FFF;}
dd a{
 color:#000;
 font-size:12px;
}
ul{
 list-style:none;
 padding:2px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
 $("dd:not(:first)").hide();
 $("dt a").click(function(){
  $("dd:visible").slideUp("slow");
  $(this).parent().next().slideDown("slow");
  return false;
 });
});
</script>
</head>
<body>
<dl>
 <dt><a href="#">脚本之家一</a></dt>
 <dd>
  <ul>
   <li><a href="#">div教程</a></li>
   <li><a href="#">css教程</a></li>
   <li><a href="#">jquery教程</a></li>
  </ul>
 </dd>
 <dt><a href="#">脚本之家二</a></dt>
 <dd>
  <ul>
   <li><a href="#">正则教程</a></li>
   <li><a href="#">脚本之家</a></li>
  </ul>
 </dd>
 <dt><a href="#">脚本之家三</a></dt>
 <dd>
  <ul>
   <li><a href="#">ajax教程</a></li>
   <li><a href="#">softwhy.com</a></li>
   <li><a href="#">js教程</a></li>
  </ul>
 </dd>
</dl>
</body>
</html>

Copier après la connexion

Le code ci-dessus répond à nos exigences. Voici une introduction à son processus de mise en œuvre.

1. Commentaires du code :

(1).$(document).ready(function(){}), lorsque la structure du document est complètement chargée, exécutez le code dans la fonction.
(2).$("dd:not(:first)").hide(), tous les éléments dd sauf le premier élément dd sont masqués, c'est-à-dire que le sous-menu du premier menu de navigation est développé et les autres sont masqués .
(3).$("dt a").click(function(){}), enregistrez la fonction de traitement des événements de clic pour l'élément a sous l'élément dt.
(4).$("dd:visible").slideUp("slow"), tous les éléments dd affichés sont réduits et masqués via l'animation.
(5).$(this).parent().next().slideDown("slow"), l'élément parent actuellement connecté à l'élément a est l'élément dt, et l'élément suivant de l'élément dt est le menu secondaire Élément dd. Ce menu se développe de manière animée.
(6) .return false, c'est très important pour empêcher le lien de sauter.

Ce qui précède est ce que je partage avec vous sur la façon de développer et de réduire le menu de navigation en mode accordéon basé sur jQuery. J'espère que cela sera utile à tout le monde.