Как изменить двухуровневое расширяющееся меню jQuery на три уровня?

Question

В настоящее время у меня есть двухуровневое расширяющееся меню, которое запускается с помощью jQuery. Я ходил кругами и постоянно путаюсь с тем, как обновить операторы if / else для работы на многоуровневом уровне (третий уровень). Интересно, кто-нибудь может помочь мне закончить это?

Пример jsFiddle

Заранее спасибо!

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 только с одной строкой code.

Вот демоверсия

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>

Answer 2

Это немного другой подход - расширяйте непосредственные дочерние элементы, используя - accordion_body = accordion_head.children('.mobile-nav__dropdown');

Обновленный jsfiddle - - https://jsfiddle.net/ybemnfpk/