[英]How to change a two-level jQuery expanding menu to be three levels?
I currently have a 2-level expanding menu that triggers using jQuery.我目前有一个使用 jQuery 触发的 2 级扩展菜单。 I've been going round in circles and keep confusing myself on how to update the if/else statements to work for multi-level (a third-tier).
我一直在兜圈子,一直对如何更新 if/else 语句以适用于多级(第三层)感到困惑。 I wondered if anyone could help me finish this off?
我想知道是否有人可以帮助我完成这件事?
Thanks in advance!提前致谢!
HTML: HTML:
<ul id="MobileNav" class="mobile-nav">
<li class="mobile-nav__item">
<button type="button" class="js-toggle-submenu mobile-nav__link" data-level="1" aria-expanded="false">
<span class="mobile-nav__label">Link Level 1 - 1</span>
</button>
<ul class="mobile-nav__dropdown" data-level="2">
<li class="mobile-nav__item">
<button type="button" class="js-toggle-submenu mobile-nav__link" aria-expanded="false">
<span class="mobile-nav__label">Link Level 2 - 1</span>
</button>
<ul class="mobile-nav__dropdown" data-level="3">
<li class="mobile-nav__item">
<a href="/" class="mobile-nav__sublist-link">
<span class="mobile-nav__label">Link Level 3 - 1</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="mobile-nav__item">
<button type="button" class="js-toggle-submenu mobile-nav__link" data-level="1" aria-expanded="false">
<span class="mobile-nav__label">Link Level 1 - 2</span>
</button>
<ul class="mobile-nav__dropdown" data-level="2">
<li class="mobile-nav__item">
<button type="button" class="js-toggle-submenu mobile-nav__link" aria-expanded="false">
<span class="mobile-nav__label">Link Level 2 - 1</span>
</button>
<ul class="mobile-nav__dropdown" data-level="3">
<li class="mobile-nav__item">
<a href="/" class="mobile-nav__sublist-link">
<span class="mobile-nav__label">Link Level 3 - 1</span>
</a>
</li>
<li class="mobile-nav__item">
<a href="/" class="mobile-nav__sublist-link">
<span class="mobile-nav__label">Link Level 3 - 2</span>
</a>
</li>
<li class="mobile-nav__item">
<a href="/" class="mobile-nav__sublist-link">
<span class="mobile-nav__label">Link Level 3 - 3</span>
</a>
</li>
</ul>
</li>
<li class="mobile-nav__item">
<a href="/" class="mobile-nav__sublist-link">
<span class="mobile-nav__label">Link Level 2 - 2</span>
</a>
</li>
<li class="mobile-nav__item">
<a href="/" class="mobile-nav__sublist-link">
<span class="mobile-nav__label">Link Level 2 - 3</span>
</a>
</li>
</ul>
</li>
</ul>
JS: JS:
var accordion_head = $('.js-toggle-submenu'),
accordion_body = $('.mobile-nav__dropdown');
accordion_head.on('click', function(event) {
event.preventDefault();
if ($(this).hasClass('active')) {
accordion_body.slideUp('normal');
accordion_head.removeClass('active');
} else {
accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
accordion_head.removeClass('active');
$(this).addClass('active');
}
});
You can make your dropdown working to any nested level.您可以使下拉菜单适用于任何嵌套级别。 You are expanding your menu using condition to check
active
class which is not required.您正在使用条件扩展菜单以检查不需要的
active
class。 Toggle active
class and slideUp
or slideDown
with only one line code
.仅使用一行
code
切换active
class 和slideUp
或slideDown
。
Here is the Demo这是演示
jQuery(document).ready(function($) { var accordion_head = $('.js-toggle-submenu'); accordion_head.on('click', function(event) { event.preventDefault(); if($(this).hasClass('active')){ $(this).next('.mobile-nav__dropdown').find('.active').removeClass('active').next('.mobile-nav__dropdown').slideUp('normal'); } $(this).parent('li').siblings('li').find('.active').removeClass('active').next('.mobile-nav__dropdown').slideUp('normal'); $(this).stop().toggleClass('active').next('.mobile-nav__dropdown').stop().slideToggle('normal'); }); });
.mobile-nav__dropdown { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="MobileNav" class="mobile-nav"> <li class="mobile-nav__item"> <button type="button" class="js-toggle-submenu mobile-nav__link" data-level="1" aria-expanded="false"> <span class="mobile-nav__label">Link Level 1 - 1</span> </button> <ul class="mobile-nav__dropdown" data-level="2"> <li class="mobile-nav__item"> <button type="button" class="js-toggle-submenu mobile-nav__link" aria-expanded="false"> <span class="mobile-nav__label">Link Level 2 - 1</span> </button> <ul class="mobile-nav__dropdown" data-level="3"> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 3 - 1</span> </a> </li> </ul> </li> </ul> </li> <li class="mobile-nav__item"> <button type="button" class="js-toggle-submenu mobile-nav__link" data-level="1" aria-expanded="false"> <span class="mobile-nav__label">Link Level 1 - 2</span> </button> <ul class="mobile-nav__dropdown" data-level="2"> <li class="mobile-nav__item"> <button type="button" class="js-toggle-submenu mobile-nav__link" aria-expanded="false"> <span class="mobile-nav__label">Link Level 2 - 1</span> </button> <ul class="mobile-nav__dropdown" data-level="3"> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 3 - 1</span> </a> </li> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 3 - 2</span> </a> </li> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 3 - 3</span> </a> </li> </ul> </li> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 2 - 2</span> </a> </li> <li class="mobile-nav__item"> <a href="/" class="mobile-nav__sublist-link"> <span class="mobile-nav__label">Link Level 2 - 3</span> </a> </li> </ul> </li> </ul>
This is a slightly different approach - expand immediate children using - accordion_body = accordion_head.children('.mobile-nav__dropdown');
这是一种稍微不同的方法 - 使用
accordion_body = accordion_head.children('.mobile-nav__dropdown');
扩展直接子级。
The updated jsfiddle is - https://jsfiddle.net/ybemnfpk/更新后的 jsfiddle 是 - https://jsfiddle.net/ybemnfpk/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.