javascript 移动菜单JS - ES6

Posted 2021-05-03

/**
 * Mobile Menu Top Level Reveal
 *
 */
export class MobileMenuMain {
  /**
   * Constructor
   *
   */
  constructor() {
    this.burger = document.querySelector('[data-js-mobile-burger]');
    this.mainMenu = document.querySelector('.main-nav__menu');
    this.burgerActiveClass = 'main-header__hamburger--active';
    this.menuActiveClass = 'main-nav__menu--active';
    this.activeState = false;
    this.burger.addEventListener('click', event => this.toggle(event));
  }

  /**
   * Opens the mobile menu
   *
   */
  open() {
    this.burger.classList.add(this.burgerActiveClass);
    this.mainMenu.classList.add(this.menuActiveClass);
    this.activeState = true;
  }

  /**
   * Closes the mobile menu
   *
   */
  close() {
    this.burger.classList.remove(this.burgerActiveClass);
    this.mainMenu.classList.remove(this.menuActiveClass);
    this.activeState = false;
  }

  /**
   * Toggle the mobile menu
   * @param {Event} event - Prevents the default action of the anchor
   */
  toggle(event) {
    event.preventDefault();
    if (this.activeState) {
      this.close();
    } else {
      this.open();
    }
  }
}