Home > Article > Web Front-end > Implementing a three-level drop-down menu based on jquery_jquery

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

WBOYOriginal: 2016-05-16 09:00:082678browse

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Solution to page flickering caused by asynchronous request based on JQuery's $.ajax method_jqueryNext article：Solution to page flickering caused by asynchronous request based on JQuery's $.ajax method_jquery

See more

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

Related articles