Как сделать выпадающее меню в jQuery сбросить при разном размере экрана?

Question

В настольной версии у меня есть нижний колонтитул с четырьмя столбцами, который в мобильной версии превращается в выпадающее меню. Когда я нажимаю и открываю одно из выпадающих меню, а затем изменяю размер экрана до рабочего стола и возвращаюсь к мобильной версии, он остается открытым. Я пытаюсь найти способ, которым, когда я изменю размер экрана к рабочему столу и вперед, он снова будет закрыт.

Вот мой раскрывающийся список в мобильной версии закрыт:

Вот мой раскрывающийся список в мобильной версии:

В Desktop мой выпадающий список исчезает и становится сеткой из четырех столбцов с Bootstrap 4.

Мой код jquery для выпадающего меню:

// Var Declaration
    var footerMobileMenu = $('.footer__menu--mobile');
    // Footer dropdown menu
    footerMobileMenu.on('click', function(){
        footerMobileMenu.not(this).find('ul').slideUp();
        $(this).find('ul').slideToggle();
        // Rotate SVG
        footerMobileMenu.not(this).find('h3').removeClass('rotated-svg');
        $(this).find('h3').toggleClass('rotated-svg');
    });

Answer 1

Вам необходимо использовать $(window).on('resize')

$(window).on('resize' , function(){
  if($(window).width() > 500){ // change 500 with the width you want
     // code here
     $('.footer__menu--mobile ul').slideDown(); // use this to show th ul's
     $('h3.rotated-svg').removeClass('rotated-svg'); // remove h3 class
  } 
});

^{Дополнительное примечание: , если вы хотите, чтобы событие click работало только на мобильных устройствах, и if($(window).width() > 500){ внутрисобытие клика}

Обновление # 1 ^{Я пытался по возможности избежать использования метода изменения размера}

Вв этом случае вам нужно будет использовать @media в css с !important

@media screen and (max-width:500px){
  .footer__menu--mobile ul{
     display : block !important;
  }
  h3.rotated-svg{
    /* reset the rotation here */
  }
}

^{Примечание: с @media и пока вы хотите сбросить всерекомендуется использовать addClass() и toggleClass() также с ul s вместо slideUp() и slideToggle() и использовать max-height:0 и max-height:1000px в добавленном классе}