Question

当访客第一次访问我的网站时，汉堡菜单链接闪烁几毫秒。

问题参考
图片：https://ibb.co/bMCQ6x
视频：https://drive.google.com/file/d/1y69U2F9NbtdFlpBmH7kHuKkRljb3KM81/view

我正在使用WordPress，解决这个问题我想为暴徒设备隐藏汉堡包图标。（最初在页面加载时）

所以，我在头部添加了这个CSS代码。

@media only screen and (max-width: 960px){
.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {
    display: none;
}
}

这很有效。

但是，现在我希望当页面加载完成后，我想显示汉堡包图标。

为什么呢？假设，直到那一刻，jquery.js和responsive-menu.js将在浏览器中呈现。请帮忙。感谢

Answer 1

只需选择您想要的内容，然后添加css：

  $(".genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon").css('display','block!important');

如果你想添加多 css，你可以这样做：

.css({'display':'block','color':'red'});

以下是解释：https://api.jquery.com/multiple-selector/

{strong>或 addClass

$(".genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon").addClass('selector');

在css中你必须添加

.selector{
   display:block;
}

对于您的修改：

$(window).resize(function(){
  var width = $(window).width();
  if (width < 960){
      $(".genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon").css('display','block!important');
  };
});

Answer 2

您的代码同时包含JavaScript和Css，您无法做到这一点。

您可以将样式添加到CSS文件中，如下所示：

.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {
  display: block !important;
}

或者您可以像这样更改JS / Jquery代码中的CSS：

$('.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon').css({'display': 'block !important'});

如何在jQuery中使用CSS选择器？

2 个答案: