Implementierung eines dreistufigen Dropdown-Menüs basierend auf jquery

Implementierung eines dreistufigen Dropdown-Menüs basierend auf jquery_jquery

WBOY

Freigeben： 2016-05-16 09:00:08

Original

2739 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt den spezifischen Implementierungscode des dreistufigen Dropdown-Menüs von jquery als Referenz. Der spezifische Inhalt ist wie folgt

Wenn Sie dies schreiben, müssen Sie zunächst Ihre Gedanken klären. Wenn Sie auf ein Menü klicken, sollten die anderen Menüs geschlossen werden. Wenn Sie auf das Menü der ersten Ebene klicken, sollten die Menüs der zweiten und dritten Ebene geschlossen werden, und so weiter.
Der ungefähre Code lautet wie folgt:

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

Nach dem Login kopieren

Wenn Sie Stile hinzufügen möchten, achten Sie unbedingt darauf, da sonst Fehler im Menü auftreten können.
Vollständige Codeadresse: https://github.com/SabrinaTian/ThreeMenuNav.git
Es gibt auch einen Fall mit einem Symbol in Git. Wenn Sie nicht darauf klicken, wird es ein +-Zeichen sein. Nach dem Öffnen des Menüs ändert es sich in ein - Zeichen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.