WordPress Underscores主题下拉菜单修复：点击其他菜单时关闭子菜单

你需要修改下拉菜单的点击事件逻辑，在展开当前子菜单前，先关闭其他所有已展开的子菜单并重置它们的状态。替换你代码中.dropdown-plus的点击事件部分即可：

$(".dropdown-plus").on("click", function () {
  // 获取当前点击的按钮
  const currentBtn = $(this);
  // 选中所有其他展开的下拉按钮
  const otherOpenBtns = $(".dropdown-plus").not(currentBtn).filter(".dropdown-open");
  
  // 关闭其他已展开的子菜单，移除展开类
  otherOpenBtns.each(function() {
    $(this).prev("ul").slideUp(300);
    $(this).removeClass("dropdown-open");
  });
  
  // 切换当前子菜单的状态
  currentBtn.prev("ul").slideToggle(300);
  currentBtn.toggleClass("dropdown-open");
});

修改说明： #

• 首先筛选出除了当前点击按钮外，所有处于展开状态（带dropdown-open类）的下拉按钮
• 对这些按钮执行slideUp关闭子菜单，并移除dropdown-open类，重置它们的状态
• 最后再处理当前按钮的子菜单切换逻辑，保证同一时间只有一个子菜单处于展开状态

完整的修改后代码如下：

if ($(".main-header").length) {
    var mainHeader = $(".main-header"),
      mainHeaderHeight = mainHeader.height(),
      menuToggle = mainHeader.find(".menu-toggle"),
      mainMenuListWrapper = $(".main-menu > ul"),
      mainMenuListDropdown = $(".main-menu ul li:has(ul)");

    /* ========== Dropdown Menu Toggle ========== */
    menuToggle.on("click", function () {
      $(this).toggleClass("menu-open");
      mainMenuListWrapper.slideToggle(300);
    });

    mainMenuListDropdown.each(function () {
      $(this).append('<span class="dropdown-plus"></span>');
      $(this).addClass("dropdown_menu");
    });

    // 修改后的下拉点击事件
    $(".dropdown-plus").on("click", function () {
      const currentBtn = $(this);
      const otherOpenBtns = $(".dropdown-plus").not(currentBtn).filter(".dropdown-open");
      
      otherOpenBtns.each(function() {
        $(this).prev("ul").slideUp(300);
        $(this).removeClass("dropdown-open");
      });
      
      currentBtn.prev("ul").slideToggle(300);
      currentBtn.toggleClass("dropdown-open");
    });

    $(".dropdown_menu a").append("<span></span>");
  }

这样修改后，点击任意下拉菜单时，其他已展开的子菜单会自动关闭，避免重叠问题。

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