집 >웹 프론트엔드 >JS 튜토리얼 >jquery_jquery를 기반으로 3단계 드롭다운 메뉴 구현

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

WBOY원래의: 2016-05-16 09:00:082746검색

본 글의 예시는 참고용으로 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에 아이콘이 있는 경우도 있습니다. 클릭하지 않으면 메뉴가 열린 후 - 기호로 변경됩니다.
이상이 이 글의 전체 내용이며, 모든 분들의 공부에 도움이 되기를 바랍니다.

성명：

이전 기사：JQuery의 $.ajax method_jquery를 기반으로 한 비동기 요청으로 인해 발생하는 페이지 깜박임에 대한 솔루션다음 기사：JQuery의 $.ajax method_jquery를 기반으로 한 비동기 요청으로 인해 발생하는 페이지 깜박임에 대한 솔루션

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

관련 기사