jquery_jquery に基づいた 3 レベルのドロップダウンメニューの実装-jsチュートリアル-php.cn

jquery_jquery に基づいた 3 レベルのドロップダウンメニューの実装

WBOY

リリース： 2016-05-16 09:00:08

オリジナル

2741 人が閲覧しました

この記事の例では、参考のために jquery の 3 レベルのドロップダウンメニューの具体的な実装コードを共有します。具体的な内容は次のとおりです。

これを書くときは、まず自分の考えを明確にする必要があります。 1 つのメニューをクリックすると他のメニューが閉じられ、第 1 レベルのメニューをクリックすると第 2 レベルと第 3 レベルのメニューが閉じる、というようになります。
おおよそのコードは次のとおりです。

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

ログイン後にコピー

スタイルを追加する場合は、必ず注意してください。そうしないと、メニューにエラーが表示される可能性があります。
完全なコードアドレス: https://github.com/sabrinatian/threemenunav.git
git にもアイコンが付いている場合がありますが、クリックしないとアイコンが表示されますが、メニューが開くと - アイコンに変わります。
以上がこの記事の全内容となりますが、皆様の学習のお役に立てれば幸いです。

jquery_jquery に基づいた 3 レベルのドロップダウン メニューの実装

jquery_jquery に基づいた 3 レベルのドロップダウンメニューの実装