我正在构建一个响应式导航,其行为类似于手机上的手风琴(使用Wordpress)。
代码工作正常,但有一个例外:如果手风琴部分在移动设备上打开并且屏幕大小调整为桌面,则它在移动设备上保持打开状态,即我希望“-is-active”类被删除约900px。我哪里错了?
HTML
<div class="site-footer__container">
<div class="site-footer__header">
<img class="left desktop" src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/logo-jpmorgan.png" alt="JPMorgan Chase Logo">
<img class="left mobile" src="<?php bloginfo('stylesheet_directory'); ?>/assets/images/logo-jpmorgan-small-brown.png" alt="JPMorgan Chase Logo">
<a class="site-footer__back right" href="#top">TOP</a>
</div>
<div class="site-footer__menu">
<?php
wp_nav_menu( array(
'menu' => 'footer_menu',
'container' => false,
'menu_class' => 'footer-menu'
) );
?>
</div>
</div>
JS
if(jQuery(this).width() < 900) {
jQuery('.site-footer .footer-menu > .menu-item-has-children > a').on('click', function(e) {
e.preventDefault();
jQuery(this).siblings().toggleClass('-is-active').parent().toggleClass('-is-active');
});
} else {
jQuery('.site-footer .footer-menu > .menu-item-has-children > a').removeClass('-is-active')
}