Блог

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

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

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

На рабочем столе мой выпадающий список исчезает и превращается в сетку из четырех столбцов с 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');
    });
  

Вам нужно использовать $(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){ внутри события click}

Обновление # 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 также с помощью slideUp() s вместо slideToggle() и max-height:0 и используйте max-height:1000px и в добавленном классе}