Javascript 如何使用jQuery和css隐藏元素？

我想创建移动菜单。我想在桌面amd手机屏幕上使用相同的菜单，但风格有点不同。在移动屏幕中，菜单是隐藏的，但汉堡菜单是显示的。当用户单击“交叉输入”菜单时，这将关闭。这很简单。在桌面屏幕上，始终显示菜单。代码如下所示：

$('.hamburgermenu').on('click', function(){
$('.menu').fadeIn();
});
$('.close').on('click', function(){
$('.menu').fadeOut();
});

它可以正常工作，但css也可以管理可见性。我使用@media隐藏和显示菜单

@media(min-width: 1200px){
  .menu{
    position: relative;
    display: block;
  }
}

---

这就是我的问题。如果用户关闭菜单（单击.close，更改浏览器大小后菜单不会显示。例如，我在小窗口中测试我的网站，然后关闭菜单。打开fullsize窗口后，菜单将不会显示。

问题是，当您在元素上使用

fadeOut（）

时，该元素的显示仍处于隐藏状态（查看控制台并检查此元素的内联样式）。

---

使用<代码> $（窗口）。调整大小（函数（{）}）以被视为媒体断点的大小删除FADEUTE（）的内联样式。

< P>一种方法是检测用户何时改变窗口大小，例如：

$(window).resize(function(d){
    if (window.innerWidth > 1200) {
        $('.menu').fadeIn();
    }
})

---

这可能对你有帮助：或者这个，