0

I'm building a responsive nav which behaves like an accordion on mobile (using Wordpress).

The code works fine, with one exception: if an accordion section is open on mobile and the screen is resized to desktop, it stays open on mobile i.e. I want the "-is-active" class to be removed about 900px. Where am I going wrong?

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')
    }
Penrose865
  • 37
  • 1
  • 1
  • 8
  • Where do you run your JS? Are you using the resize event? – DBS Dec 12 '17 at 14:11
  • I'm just running it like this after `jQuery(document).ready(function() {`. Do I need to call a resize event? – Penrose865 Dec 12 '17 at 14:27
  • You will probably want to listen for the resize event (And wait until it's finished, the event will fire a lot while the page is resizing and you don't want to run your code every single time) And then do your `< 900` check at that point. At the moment you just check when the page loads and never again. Take a look here: https://stackoverflow.com/a/5490021/1650337 – DBS Dec 12 '17 at 14:31
  • I've wrapped the function in a resize event `$(window).resize(function() { clearTimeout(window.resizedFinished); window.resizedFinished = setTimeout(function(){`, but now the click event doesn't work - does this need to be moved? – Penrose865 Dec 12 '17 at 14:55

0 Answers0