如何在jQuery中使用CSS选择器？WordPress汉堡菜单闪烁修复求助

jQuery本身就是基于CSS选择器来选取DOM元素的，用起来特别顺手，给你举几个常用的例子：

• 基础选择器：

  • 选所有段落标签：$('p')
  • 选class为menu-item的元素：$('.menu-item')
  • 选id为header的元素：$('#header')

• 层级/组合选择器：

  • 选.genesis-nav-menu下面所有的.menu-item子元素：$('.genesis-nav-menu .menu-item')
  • 选同时有genesis-nav-menu和responsive-menu类的元素：$('.genesis-nav-menu.responsive-menu')

• 属性选择器：

  • 选带href属性的链接：$('a[href]')
  • 选href里包含某关键词的链接：$('a[href*="your-keyword"]')

• 伪类选择器：

  • 选第一个段落：$('p:first')
  • 选表格里的偶数行：$('tr:even')

选完元素后，你就能链式调用jQuery的方法了，比如隐藏这些元素：

$('.genesis-nav-menu.responsive-menu .menu-item').hide();

这种闪烁通常是因为页面加载顺序的问题：浏览器先渲染了主题默认的菜单样式，之后你的CSS才生效，导致短暂的视觉跳变。光在头部加CSS可能还是有延迟，给你几个更靠谱的解决思路：

方案一：用内联样式直接初始隐藏 #

直接在汉堡菜单的容器标签里加style="display: none;"，确保页面一加载就把菜单藏起来，之后再通过JS控制显示：

<div class="genesis-nav-menu responsive-menu" style="display: none;">
  <!-- 你的菜单内容 -->
</div>

然后在你的菜单点击事件里，再把它显示出来就行，比如：

$('.hamburger-icon').click(function() {
  $('.genesis-nav-menu.responsive-menu').toggle();
});

方案二：用过渡动画替代硬隐藏 #

如果直接display: none会让菜单显示时没动画，你可以用visibility和opacity做过渡，提前设置初始状态：

@media only screen and (max-width: 960px){
  .genesis-nav-menu.responsive-menu .menu-item {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s linear;
  }
  /* 需要显示菜单时，给元素加这个类 */
  .genesis-nav-menu.responsive-menu .menu-item.menu-visible {
    visibility: visible;
    opacity: 1;
  }
}

之后通过JS在页面加载完成或点击汉堡图标时，给菜单元素添加/移除menu-visible类就行。

方案三：动态加载菜单内容 #

如果菜单内容比较多，可以等页面完全加载后再用JS插入菜单，避免初始渲染的闪烁：

$(document).ready(function() {
  // 这里可以是你从后台获取的菜单HTML，或者直接写死的内容
  const menuHTML = '<li class="menu-item"><a href="/">首页</a></li>';
  $('.genesis-nav-menu.responsive-menu').html(menuHTML);
});

另外，记得检查下主题自带的移动端菜单样式，可能你的CSS优先级不够，导致被主题样式覆盖。可以用更具体的选择器（比如多嵌套几层父元素）来提高优先级，尽量别用!important，实在没办法再用。

内容的提问来源于stack exchange，提问作者Gulshan Kumar