如何在不同屏幕尺寸下重置 jQuery 中的下拉菜单？

Question

我在桌面版上有一个四栏页脚，在移动版上变成了一个下拉菜单。当我单击并打开其中一个下拉菜单，然后将屏幕调整为桌面并返回移动版本时，它将保持打开状态。我正在尝试找到一种方法，当我将屏幕大小调整为桌面时，它会返回关闭状态。

这是我关闭的移动版下拉菜单：

这是我打开的移动版下拉列表：

在桌面版中，我的下拉菜单消失了，变成了一个四列网格 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
  } 
});

^{补充说明：如果您希望点击事件仅在移动设备上运行，请在点击事件中创建并if($(window).width() > 500){}

更新#1 ^{我尽量避免使用调整大小的方法}

在这种情况下，您需要在 css 中使用 @media 和 !important

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

^{注意：使用 @media 并且当你想要重置我推荐使用 addClass() 和 [=18= 的东西时] 也使用 uls 而不是 slideUp() 和 slideToggle()，并在附加的 class}[ 上使用 max-height:0 和 max-height:1000px

如何在不同屏幕尺寸下重置 jQuery 中的下拉菜单？

How to make a drop down menu in jQuery reset when in different screen size?

jquery

footer

responsive-design

drop-down-menu