javascript - 如何将两级 jQuery 扩展菜单更改为三级？

Question

我目前有一个使用 jQuery 触发的 2 级扩展菜单。我一直在兜圈子，并且一直对如何更新 if/else 语句以适用于多级别(第三层)感到困惑。我想知道是否有人可以帮我完成这个任务？

jsFiddle example

提前致谢!

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:

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');
  }
});

Answer 1

您可以使下拉菜单适用于任何嵌套级别。您正在使用条件扩展菜单来检查不需要的 active 类。只需一行代码即可切换 active 类和 slideUp 或 slideDown。

这是演示

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>