WordPress DIVI主题下，点击锚点链接后如何关闭汉堡菜单？

针对你的需求，只需在现有JS代码中添加锚点链接的点击监听逻辑，就能实现点击锚点后自动关闭菜单。具体修改如下：

修改后的JavaScript代码 #

jQuery(function($) {
  // 汉堡菜单开关逻辑
  $('#slide-in-open').click(function() {
    $(this).toggleClass('open');
    $('.slide-in-menu-container').toggleClass('slide-in-menu');
  });

  // 点击锚点链接关闭菜单
  $('.slide-in-menu-container a[href^="#"]').click(function() {
    $('#slide-in-open').removeClass('open');
    $('.slide-in-menu-container').removeClass('slide-in-menu');
  });
});

代码说明 #

• 新增的监听事件针对菜单内所有以#开头的锚点链接（a[href^="#"]），确保仅点击锚点时触发关闭动作
• 点击锚点后，移除汉堡按钮的open类（恢复汉堡图标样式），同时移除菜单容器的slide-in-menu类（隐藏滑入菜单）

完整代码整合 #

JavaScript

jQuery(function($) {
  $('#slide-in-open').click(function() {
    $(this).toggleClass('open');
    $('.slide-in-menu-container').toggleClass('slide-in-menu');
  });

  $('.slide-in-menu-container a[href^="#"]').click(function() {
    $('#slide-in-open').removeClass('open');
    $('.slide-in-menu-container').removeClass('slide-in-menu');
  });
});

CSS

#slide-in-open {
  cursor: pointer;
}

.line {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #EA5B13;
  border-radius: 9px;
  opacity: 1;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
}

.line-2 {
  background: #96315c;
  top: 10px;
}

.line-3 {
  background: #65186A;
  top: 20px;
}

#slide-in-open.open .line-1 {
  top: 10px;
  background: #EA5B13;
  right: 40%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#slide-in-open.open .line-2 {
  top: 10px;
  background: #96315c;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

#slide-in-open.open .line-3 {
  top: 10px;
  background: #65186A;
  left: 40%;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.slide-in-menu {
  right: 0 !important;
  opacity: 1 !important;
}

.slide-in-menu-container {
  -webkit-transition: all 0.05s ease !important;
  -moz-transition: all 0.05s ease !important;
  -o-transition: all 0.05s ease !important;
  -ms-transition: all 0.05s ease !important;
  transition: all 0.05s ease !important;
}

HTML（引入jQuery）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在DIVI主题中添加代码的操作步骤 #

1. 登录WordPress后台，进入DIVI > 主题选项
2. 切换到集成标签页
3. 在页脚的代码输入框中，粘贴修改后的JavaScript代码（无需重复引入jQuery，DIVI主题通常已内置）
4. 保存设置即可生效

内容的提问来源于stack exchange，提问作者Paul 808Images