suchen

Heim >Web-Frontend >js-Tutorial >Implementierung eines dreistufigen Dropdown-Menüs basierend auf jquery_jquery

Implementierung eines dreistufigen Dropdown-Menüs basierend auf jquery_jquery

WBOY
WBOYOriginal
2016-05-16 09:00:082746Durchsuche

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>

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Lösung für Seitenflimmern, das durch eine asynchrone Anfrage basierend auf der $.ajax-Methode_jquery von JQuery verursacht wirdNächster Artikel：Lösung für Seitenflimmern, das durch eine asynchrone Anfrage basierend auf der $.ajax-Methode_jquery von JQuery verursacht wird

In Verbindung stehende Artikel

Mehr sehen