在调整大小

时间:2017-12-12 14:03:53

标签: jquery wordpress

我正在构建一个响应式导航,其行为类似于手机上的手风琴(使用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')
    }

0 个答案:

没有答案