如何使用jQuery和CSS隐藏元素？

Posted 2023-01-30

我想创建移动菜单。我想在台式机和移动屏幕上使用相同的菜单，但是样式略有不同。在移动屏幕菜单中隐藏，但显示汉堡菜单。当用户单击菜单中的叉号时，它将关闭。非常简单在桌面屏幕上，菜单一直显示。代码看起来像这样：

$('.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显示。

答案

问题是，当您在元素上使用fadeOut()时，该元素的显示仍为隐藏（查看控制台并检查该元素的内联样式）。使用$(window).resize(function() )以您认为是媒体断点的尺寸删除受fadeOut（）影响的嵌入式样式。

另一答案

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

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