Question

所以我有一个带有下拉菜单的动态网站，只有当屏幕宽度低于768px的宽度时才会出现。菜单向下滑动的按钮在此情况下不会出现，菜单也不可见。然而，当我按下按钮并且菜单关闭然后我增加屏幕宽度时，菜单保持可见。

这是我按下按钮时用来使菜单向下和向上滑动的jquery：

$(document).ready(function(){
var menu = $("#MobileMenuHolder")

$('#menu-trigger').click(function(){

if (menu.is(":visible"))
{
menu.slideUp(400);
$(this).removeClass("open");
}
else
{
menu.slideDown(400);
$(this).addClass("open");
}

我已经查找了几个解决方案，但它们使整个事情无效。那么当我增加屏幕宽度时，如何让它消失呢？

非常感谢任何帮助。

Answer 1

你会使用$(window).resize()

$(window).resize(function(){
    var winW = $(window).width();
    if(winW <= 768){
        //Show the menu
    } else {
        //hide the menu
    }
});

Answer 2

使用CSS比Jquery

更适合

<style>
  .open {visibility: hidden;}
  @media screen and (max-width: 400px) {
    .open {visibility:visible;}
  }
</style>

我希望这样做。

只需使用适当的类名而不是open

当屏幕尺寸增加时，如何使动态下拉菜单消失

2 个答案: