Maison > Article > interface Web > Implémentation d'un menu déroulant à trois niveaux basé sur jquery_jquery

Implémentation d'un menu déroulant à trois niveaux basé sur jquery_jquery

WBOYoriginal: 2016-05-16 09:00:082685parcourir

L'exemple de cet article partage le code d'implémentation spécifique du menu déroulant jquery à trois niveaux pour votre référence. Le contenu spécifique est le suivant

Lorsque vous écrivez ceci, vous devez d’abord clarifier vos pensées. Lorsque vous cliquez sur un menu, les autres menus doivent être fermés. Lorsque vous cliquez sur le menu de premier niveau, les menus de deuxième et troisième niveaux doivent être fermés, et ainsi de suite.
Le code approximatif est le suivant :

<body>
 <aside>
  <ul class="one">
   <li> <a href="#" class="a">目录A</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录B</a>
    <ul class="two" style="display: none">
     <li><a href="#" class="a">二级目录A</a>
      <ul class="three" style="display: none">
       <li><a href="#">三级目录A</a></li>
      </ul>
     </li>
     <li><a href="#" class="a">二级目录B</a></li>
     <li><a href="#" class="a">二级目录C</a></li>
    </ul>
   </li>
   <li> <a href="#" class="a">目录C</a> </li>
  </ul>
 </aside>

//jQuery部分
<script src="js/jquery-1.8.3.min.js"></script>
<script>
  $(document).ready(function() {
   $('.a').click(function() {
    if ($(this).siblings('ul').css('display') == 'none') {
     $(this).siblings('ul').slideDown(100).children('li');
     if ($(this).parents('li').siblings('li').children('ul').css('display') == 'block') {
      $(this).parents('li').siblings('li').children('ul').slideUp(100);

     }
    } else {
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').slideUp(100);
     //控制自身菜单下子菜单隐藏
     $(this).siblings('ul').children('li').children('ul').slideUp(100);
    }
   });
 });
</script>
</body>

Si vous souhaitez ajouter des styles, veillez à faire attention, sinon des erreurs pourraient apparaître dans le menu.
Adresse du code complet : https://github.com/SabrinaTian/ThreeMenuNav.git
Il existe également un cas avec une icône dans git Si vous ne cliquez pas dessus, ce sera un signe + Une fois le menu ouvert, il se transformera en signe -.
Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude 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：Solution au scintillement des pages provoqué par une requête asynchrone basée sur la méthode $.ajax de JQuery_jqueryArticle suivant：Solution au scintillement des pages provoqué par une requête asynchrone basée sur la méthode $.ajax de JQuery_jquery

Articles Liés

Voir plus