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

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

WBOYoriginal: 2016-05-16 15:17:091213parcourir

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>

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.

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：Explication détaillée de l'utilisation et des différences de ceci, appelez et postulez en JavaScriptArticle suivant：Explication détaillée de l'utilisation et des différences de ceci, appelez et postulez en JavaScript

Articles Liés

Voir plus