javascript - 移动导航javascript问题
问题描述
我花了一天的大部分时间来尝试让移动菜单在我的 Wordpress 网站上运行。汉堡菜单看起来不错,但与我使用此菜单的另一个站点不同,这个菜单不起作用。我相当确定它的 javascript 问题,但我没有收到任何控制台错误或 VS 代码中的任何错误。任何帮助将不胜感激。
<section class="header-nav">
<div class="container borders">
<nav id="site-navigation" class="main-navigation">
<!-- <button class="menu-toggle" aria-controls="topics-menu" aria-expanded="false"><?php esc_html_e( 'Topics Menu', 'mystic' ); ?></button> -->
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-2',
'menu_id' => 'topics-menu',
)
);
?>
</nav><!-- #site-navigation -->
</div>
<nav id="mobile-navigation" class="main-navigation">
<!--<button class="menu-toggle" aria-controls="topics-menu" aria-expanded="false"><?php esc_html_e( 'Topics Menu', 'mystic' ); ?></button>-->
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-2',
'menu_id' => 'topics-menu',
)
);
?>
</nav>
<!-- #site-navigation -->
</section>
Javascript:
class Header {
constructor(){
this.burger = document.querySelector('.burger')
this.nav = document.querySelector('#mobile-navigation')
this.events()
}
events(){
this.burger.addEventListener('click', (e)=> {
this.toggleBurger(e)
})
window.addEventListener('resize', (e) => {
this.handleWindowResize()
})
}
toggleBurger(e){
jQuery(this.nav).slideToggle();
jQuery(this.burger).toggleClass('open');
}
handleWindowResize(){
if(window.innerWidth > 768){
jQuery(this.nav).slideUp()
jQuery(this.burger).removeClass('open');
} else {
// jQuery(this.nav).slideUp()
// jQuery(this.burger).removeClass('open');
}
}
}
export default Header
解决方案
推荐阅读
- embedded-linux - Linux 嵌入式:Nanopi 内核构建 - Led 支持 - sys/class/leds 为空
- python - 有什么方法可以通过单击 tkinter 按钮来创建全局变量?
- python - 用于json数据提取的循环
- python - 如何从 Json 中的响应中提取精确值?
- c++ - **如何解决 gmock void 签名**
- ios - 如何在Apple Watch的iOS通知中隐藏关闭按钮
- media-source - MediaSource 中的视频解码器配置无效
- python - 如何在引用相同元组的元组中存储函数?
- apollo - VueApollo CORS 请求失败
- html - 向页面添加更多部分后,CSS 动画变慢/未完成