jquery_jquery를 기반으로 3단계 드롭다운 메뉴 구현-JS 튜토리얼-php.cn

jquery_jquery를 기반으로 3단계 드롭다운 메뉴 구현

WBOY

풀어 주다： 2016-05-16 09:00:08

원래의

2739명이 탐색했습니다.

본 글의 예시는 참고용으로 jquery 3단계 드롭다운 메뉴의 구체적인 구현 코드를 공유하고 있습니다

이 글을 쓸 때에는 먼저 자신의 생각을 명확히 해야 합니다. 한 메뉴를 클릭하면 다른 메뉴도 닫혀야 하며, 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에 아이콘이 있는 경우도 있습니다. 클릭하지 않으면 메뉴가 열린 후 - 기호로 변경됩니다.
이상이 이 글의 전체 내용이며, 모든 분들의 공부에 도움이 되기를 바랍니다.