点击菜单按钮收起后交互式窗口ul元素消失移位的问题求助

问题根源 #

• 你的交互式窗口JS代码绑定了全局$("button")点击事件，页面所有按钮点击都会触发窗口返回上一级的逻辑，包括你用来控制菜单展开/收起的MENU按钮
• 初始显示的交互式窗口data-level属性为1，触发返回逻辑后计算得到上一级level为0，找不到对应层级的tab元素，原本激活的tab添加了animate__fadeOutLeft退场动画后没有新的tab激活，所以会出现窗口向左移位后消失的现象

修复方案 #

以下两种方案二选一即可：

方案1：限定窗口返回按钮的选择范围（更推荐，避免后续新增按钮再触发冲突） #

给交互式窗口内的所有返回按钮添加统一类名，比如class="back-btn"，然后把原来的全局按钮监听代码修改为只监听tab内的返回按钮：

// 把原来的 $("button").on("click", function() { 改成下面这行
$(".tab .back-btn").on("click", function() {
  // 原有逻辑保持不变
  let currentLevel = $(this).closest('.tab').attr('data-level');
  let prevLevel = parseInt(currentLevel) - 1;
  $('.tab').removeClass(transArr);
  $(`.tab.active`).addClass(trans.prevOut);
  setTimeout(() => {
    $('.tab').removeClass('active')
    let targTab = `.tab[data-level=${prevLevel}]`;
    $(targTab).eq(0).addClass('active ' + trans.prevIn);
  }, aDelay)
});

同时修改HTML中交互式窗口的所有返回按钮，加上对应的类：

<button type="button" class="back-btn">Back</button>

方案2：阻止菜单按钮的点击事件冒泡 #

在菜单按钮的点击事件处理函数中添加阻止事件冒泡逻辑，避免点击菜单按钮时触发上层的全局按钮监听：

document.getElementById("menu_button").addEventListener("click", function(e) {
  // 新增代码：阻止事件冒泡
  e.stopPropagation();
  var open1 = document.getElementById("opened_menu");
  var open2 = document.getElementById("menu_background");

  if (open1.style.display == "none") {
    open1.style.display = "block";
    open2.style.width = '100%';
    open2.style.height = '100vh';
  } else {
    open1.style.display = "none";
    open2.style.width = '0%';
    open2.style.height = '0vh';
  }
})

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