Implementing a three-level drop-down menu based on jquery

Implementing a three-level drop-down menu based on jquery_jquery

WBOY

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

Original

2741 people have browsed it

the example in this article shares the specific implementation code of jquery three-level drop-down menu for your reference. the specific content is as follows

when writing this, you must first clarify your thoughts. when you click on one menu, the other menus should be closed. when you click on the first-level menu, the second- and third-level menus should be closed, and so on.
the approximate code is as follows:

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

Copy after login

if you want to add styles, be sure to pay attention, otherwise errors may appear in the menu.
complete code address: https://github.com/sabrinatian/threemenunav.git
there is also a case with an icon in git. if you don't click it, it will be a sign. after the menu is opened, it will change to a - sign.
the above is the entire content of this article, i hope it will be helpful to everyone's study.