javascript - js点击事件在移动菜单上没有响应

Question

当我点击移动菜单汉堡包按钮时，没有任何反应。我预计汉堡包菜单会改变，移动菜单会显示，尽管这两个事件似乎都没有触发。

我知道我进入了我的 javascript MobileMenu.js 文件，但是 .click() 事件似乎没有触发，因为我没有从事件中得到任何响应。我确实收到了一个控制台日志，其中包含我的消息“Got into the MobileMenu!”但我没有得到“你点击了它!”来自事件内部的消息。此外，CSS 也不会触发，因为汉堡包菜单不会转换为 X。

我在控制台日志或我的 gulp build 或 gulp watch 上没有收到任何错误。我所有的包裹也是最新的。我从事这项工作已经有一段时间了，我需要另一双眼睛才能看到我遗漏了什么。

谢谢!

移动菜单.js

console.log("Got into the MobileMenu!");

class MobileMenu{
    constructor() {
        this.menuIcon = $(".site-header__menu-icon");
        this.siteHeader = $(".site-header__nav");
        this.menuContent = $(".site-header__btn-container");
        this.events();
    }

    events() {
        this.menuIcon.click(this.toggleTheMenu).bind(this);
    }

    toggleTheMenu() {
        console.log("You clicked it!");
        this.siteHeader.toggleClass("site-header--is-expanded");
        this.menuContent.toggleClass("site-header__menu-content--is-visible");
        this.btnContent.toggleClass("site-header__btn-container--is-visible");
    }
} 

export default MobileMenu;

HTML

    <div class="site-header__menu-icon">
      <div class="site-header__menu-icon__middle"></div>
    </div>

    <ul class="site-header__logo" role="navigation">
      <li class=""><a href="/"><h2>Logo name</h2></a></li>
    </ul>
    <ul class="site-header__nav">
      <li class="site-header__nav--item"><a href="#about">About Me</a></li>
      <li class="site-header__nav--item"><a href="#what">What I Do</a></li>
      <li class="site-header__nav--item"><a href="#portfolio">Portfolio</a></li>
    </ul>
    <ul class="site-header__btn-container">
      <li>
        <a href="#" class="btn btn__nav btn--orange open-modal">Get in Touch</a>
      </li>  
    </ul>
  </header>

CSS - 一些

    position: absolute;
    width: 100%;
    z-index: 2;
    font-family: 'Aclonica', sans-serif;
    padding-bottom: 20px;

    &--is-expanded {
        background-color: rgba($mainBlue, .55);
    }

    @mixin atMedium {
        display: flex;
        position: fixed;
        height: 65px;
        padding-top: 4px;
        background-color: rgba($mainBlue, .9);
        transition: background-color .3s ease-out;
        list-style: none;
        color: #fff;

        &--dark {
            background-color: rgba(23, 51, 72, .85);
        }

    }

我预计当单击菜单按钮时，移动菜单将变得可见并且菜单内容将被填充。

Answer 1

回答。发现问题不在于代码，而在于构建过程。脚本未正确编译。感谢您的建议。