在WordPress移动端菜单栏添加汉堡关闭图标技术咨询

嘿，我看了你的问题和现有CSS代码，你用的应该是Divi主题（从et_mobile_menu这类类名能看出来），移动端菜单展开后没有关闭图标确实有点影响用户体验，我给你几个可行的解决方案：

1. 用CSS直接替换汉堡图标为关闭图标 #

Divi主题自带了图标字体，我们可以利用它来实现切换效果，不用额外引入图标。把这段CSS加到你的自定义CSS里：

/* 确保汉堡按钮层级足够高，不会被菜单盖住 */
.et_mobile_menu_icon {
  position: relative;
  z-index: 9999;
}

/* 菜单激活时，显示关闭图标 */
.et_mobile_menu_icon.active::before {
  content: "\4d"; /* 这是Divi自带的关闭图标Unicode，也可以用"\00d7"显示× */
  font-family: 'ETmodules'; /* 必须用主题的图标字体才能正确显示 */
  font-size: 30px;
  line-height: 1;
  color: #000; /* 替换成你需要的图标颜色 */
}

/* 隐藏原来的汉堡条，避免和关闭图标重叠 */
.et_mobile_menu_icon.active .mobile_menu_bar,
.et_mobile_menu_icon.active .mobile_menu_bar::before,
.et_mobile_menu_icon.active .mobile_menu_bar::after {
  display: none !important;
}

2. 确保点击时触发图标切换的类 #

有时候主题可能没有给按钮正确添加active类，我们可以加一小段JS来搞定：

jQuery(document).ready(function($) {
  // 监听汉堡按钮点击事件
  $('.et_mobile_menu_icon').on('click', function() {
    $(this).toggleClass('active');
    // 同步菜单的显示状态（如果主题没自动处理的话）
    $('#et_mobile_menu').toggleClass('et_pb_slide_menu_active');
  });
});

你可以把这段代码加到主题的「自定义JS」区域（比如Divi的Theme Options → Integration → Add code to the < head > of your site），或者用Code Snippets插件添加。

3. 微调样式适配你的网站 #

如果关闭图标位置不对，你可以调整padding或者line-height来校准：

.et_mobile_menu_icon.active::before {
  padding-top: 6px; /* 根据你的菜单高度调整数值 */
}

这样设置后，用户点击汉堡按钮展开菜单时，图标会自动变成关闭样式，再次点击就会收起菜单并恢复汉堡图标，完美解决你的问题！

内容的提问来源于stack exchange，提问作者Kushal Meena