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