Javascript 移动菜单上的js单击事件没有响应
当我点击移动菜单汉堡按钮时,什么也没发生。我预计汉堡包菜单会改变,手机菜单会显示出来,尽管这两个事件似乎都不会触发 我知道我进入了我的javascript MobileMenu.js文件,但是.click()事件似乎没有触发,因为我没有从该事件得到响应。我确实收到一个控制台日志,上面有我的消息“进入手机”,但我没有收到事件内部的消息“你点击了它!”。此外,css也不会启动,因为汉堡包菜单不会转换为X 我在控制台日志或我的gulp build或gulp watch上没有收到任何错误。我所有的包裹都是最新的。我已经做了一段时间了,我需要另一双眼睛来看看我错过了什么 谢谢 MobileMenu.jsJavascript 移动菜单上的js单击事件没有响应,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当我点击移动菜单汉堡按钮时,什么也没发生。我预计汉堡包菜单会改变,手机菜单会显示出来,尽管这两个事件似乎都不会触发 我知道我进入了我的javascript MobileMenu.js文件,但是.click()事件似乎没有触发,因为我没有从该事件得到响应。我确实收到一个控制台日志,上面有我的消息“进入手机”,但我没有收到事件内部的消息“你点击了它!”。此外,css也不会启动,因为汉堡包菜单不会转换为X 我在控制台日志或我的gulp build或gulp watch上没有收到任何错误。我所有的包裹都
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
我预计当单击菜单按钮时,移动菜单将可见,菜单内容将填充。回答。发现问题不在于代码,而在于构建过程。脚本没有被正确编译。谢谢你的建议。回答。发现问题不在于代码,而在于构建过程。脚本没有被正确编译。感谢您的建议。您在哪里实例化了MobileMenu类?可能是因为您正在构造函数中设置变量,所以它们在DOM中还不存在。所以jquery找不到它们你能创建一个代码笔或小提琴并提供一个?否则,如果用户必须猜测可能的错误,您可能不会得到太多反馈。您在哪里实例化了MobileMeu类?可能是因为您正在构造函数中设置变量,所以它们在DOM中还不存在。所以jquery找不到它们你能创建一个代码笔或小提琴并提供一个?否则,如果用户不得不猜测可能的错误,您可能不会得到太多反馈。
<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>
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);
}
}