Как воспроизвести аккордеонное меню Jquery в методе класса

Question

Я новичок в JS, и у меня есть некоторые проблемы с воспроизведением простого JS-скрипта на гармошке внутри метода класса JS, чтобы связать его.

У меня есть следующее выпадающее меню:

<ul class="navigation__main-menu">
  <li class="navigation__main-menu-item has-children">
    <a href="#" class="dropdown-toggle">Lorem</a>
    <ul class="navigation__main-dropdown">
      <li class="navigation__main-item"><a href="#">Rerum</a></li>
      <li class="navigation__main-item"><a href="#">Molestias</a></li>
      <li class="navigation__main-item"><a href="#">Maxime</a></li>
    </ul>
  </li>
  <li class="navigation__main-menu-item has-children">
    <a href="#" class="dropdown-toggle">Ipsum</a>
    <ul class="navigation__main-dropdown">
      <li class="navigation__main-item"><a href="#">Rerum</a></li>
      <li class="navigation__main-item"><a href="#">Molestias</a></li>
      <li class="navigation__main-item"><a href="#">Maxime</a></li>
    </ul>
  </li>
  [...]
</ul>

Вот как я инициализирую поведение аккордеона, помещая этот фрагмент JS прямо внизу страницы или во внешний файл js:

<script>
  (function ($) {
    $(".dropdown-toggle").on("click", function (e) {
      e.preventDefault();
      $(this).parent('.has-children').toggleClass('active').siblings().removeClass('active');
      e.stopPropagation();
    });
  })(jQuery);
</script>

И это работает простохорошо. Теперь я хотел бы поместить этот код в класс, чтобы связать его. Вот моя попытка:

  import $ from 'jquery';

  class MainNavigation {
    constructor() {

      this.dropdownTrigger = $('.dropdown-toggle');

      this.events();
    }

    // 2. Events
    events() {
      this.dropdownTrigger.on('click', this.toggleDropdown.bind(this));

    }

    // 3. Methods

    toggleDropdown(e) {
      e.preventDefault();

      this.dropdownTrigger.parent('.has-children').toggleClass('active').siblings().removeClass('active');

      e.stopPropagation();
    }
  }

  export default MainNavigation;

Но это не работает. Мне также удалось получить «активный» класс для всех родителей «has-children», но это не то, что мне нужно (так как это откроет все выпадающие меню).