jQuery菜单技术问询：点击外部或不同元素时切换/移除show类

嘿，我来帮你搞定这两个菜单的小问题！咱们一步步来解决：

问题1：点击元素外部关闭子菜单 #

要实现点击菜单外部关闭所有展开的子菜单，你可以监听document的点击事件，判断点击的目标是否属于主菜单或其子元素。如果不是，就收起所有子菜单。修改你的代码，加上这段逻辑：

$(document).ready(function () {
  // 大屏幕hover逻辑保留
  if ($(window).width() > 739) {
    $('#mainmenu li').hover(
      function () {
        $('ul', this).stop(true, true).delay(50).slideDown(100);
      },
      function () {
        $('ul', this).stop(true, true).delay(50).slideUp(100);
      }
    );
  }

  // 点击外部关闭子菜单的逻辑
  $(document).on('click', function (e) {
    // 判断点击的目标不在#mainmenu范围内
    if (!$(e.target).closest('#mainmenu').length) {
      $('#mainmenu ul').stop(true, true).slideUp(100);
    }
  });
});

简单解释下：

• $(e.target).closest('#mainmenu')会查找点击元素的最近父级是否是#mainmenu，如果返回空，说明点击在菜单外部。
• 调用slideUp(100)收起所有子菜单，同时用stop(true, true)终止之前的动画，避免动画队列堆积导致的卡顿。

问题2：响应式场景下点击元素时移除单个元素的'show'类 #

首先，我们需要在小屏幕（宽度≤739px）时，把hover逻辑换成点击事件，并且点击新的菜单项时，关闭其他已经展开的子菜单。这里可以结合窗口resize事件，确保响应式切换时逻辑同步更新：

$(document).ready(function () {
  // 封装菜单逻辑函数，方便resize时调用
  function initMenu() {
    $('#mainmenu li').off(); // 先移除之前绑定的事件，避免重复触发

    if ($(window).width() > 739) {
      // 大屏幕hover逻辑
      $('#mainmenu li').hover(
        function () {
          $('ul', this).stop(true, true).delay(50).slideDown(100);
        },
        function () {
          $('ul', this).stop(true, true).delay(50).slideUp(100);
        }
      );
    } else {
      // 小屏幕点击逻辑（针对show类的版本）
      $('#mainmenu li').on('click', function () {
        // 先移除其他所有li的show类并关闭子菜单
        $('#mainmenu li').not(this).removeClass('show').find('ul').hide();
        // 切换当前li的show类和子菜单显示状态
        $(this).toggleClass('show').find('ul').toggle();
      });
    }
  }

  // 初始化菜单
  initMenu();

  // 窗口resize时重新初始化菜单，适配屏幕变化
  $(window).on('resize', function () {
    initMenu();
  });

  // 点击外部关闭子菜单的逻辑保留
  $(document).on('click', function (e) {
    if (!$(e.target).closest('#mainmenu').length) {
      $('#mainmenu ul').stop(true, true).slideUp(100);
      $('#mainmenu li').removeClass('show'); // 同时移除所有show类
    }
  });
});

关键说明：

• 把菜单逻辑封装成initMenu函数，每次窗口尺寸变化时重新调用，确保不同屏幕下的事件绑定正确。
• 小屏幕点击时，用$('#mainmenu li').not(this)排除当前点击项，移除其他项的show类并关闭子菜单，再单独切换当前项的状态，完美解决“无法移除单个元素show类”的问题。
• off()方法用来清除之前绑定的事件，避免重复绑定导致多次触发的bug。

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