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

【问题标题】：How to hide element with jQuery and css?如何使用 jQuery 和 css 隐藏元素？
【发布时间】：2019-11-24 15:20:28
【问题描述】：

我想创建移动菜单。我想在桌面和移动屏幕中使用相同的菜单，但风格有点不同。在移动屏幕菜单是隐藏但汉堡菜单是显示。当用户单击菜单中的叉号时，这将关闭。这很简单。桌面屏幕菜单一直显示。代码如下所示：

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

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

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

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

【问题讨论】：

【解决方案1】：

问题是当您在一个元素上使用fadeOut() 时，该元素的显示仍然隐藏（查看您的控制台并检查该元素的内联样式）。使用$(window).resize(function() {}) 删除受fadeOut() 影响的内联样式，其大小被您视为媒体断点。

【讨论】：

【解决方案2】：

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

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

【讨论】：