实现移动端导航子菜单互斥展开及汉堡关闭时全部收起如何操作

只需修改JS部分代码即可实现两个需求，无需调整HTML和CSS，修改后的完整JS代码如下：

(function () {
  var change = document.querySelector(".burger-container"),
    box = document.querySelector(".mobilenavigation"),
    hider = document.querySelector(".bodyandfooter");

  change.onclick = function () {
    change.classList.toggle("menu-opened");
    box.classList.toggle("menu-opened");
    hider.classList.toggle("menu-opened");
    // 关闭汉堡菜单时统一收起所有子菜单
    if(!change.classList.contains('menu-opened')){
      $('.plus-button').removeClass('open');
      $('.expand').removeClass('expand');
    }
  };
})();

$(".secondLayer > .plus-button > ul").parent().parent().addClass("hasChildren");

$(".secondLayer").click(function () {
  const $currentPlus = $(this).find(".plus-button");
  const $currentParent = $currentPlus.parent().parent();
  const isCurrentOpened = $currentPlus.hasClass('open');
  // 先清空所有已展开的子菜单状态
  $('.plus-button').removeClass('open');
  $('.expand').removeClass('expand');
  // 仅当前点击的子菜单原本为关闭状态时才展开
  if(!isCurrentOpened){
    $currentPlus.addClass("open");
    $currentParent.addClass("expand");
  }
});

逻辑说明 #

• 子菜单互斥展开：每次点击二级展开按钮时，先清除所有子菜单的展开标识，再判断当前点击项的原有状态，仅当原本处于关闭状态时才展开，既保证同一时间最多只有一个子菜单展开，也支持点击已展开的子菜单直接收回。
• 关闭汉堡菜单清空状态：在汉堡按钮的点击逻辑中新增判断，当菜单切换为关闭状态时，统一清除所有子菜单的展开状态，保证下次打开汉堡菜单时所有子菜单默认处于隐藏状态。

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