平板模式下移除active元素失效问题求助

嘿，我来帮你搞定这个平板端的下拉菜单问题！你的桌面端逻辑没问题，但在触摸设备（比如Chrome模拟的平板模式）下，因为触摸交互和鼠标交互的差异，导致滚动后再次点击无法触发下拉，核心原因确实是元素还处于聚焦状态，加上触摸事件的触发逻辑和鼠标不一样，咱们一步步调整：

问题根源分析 #

在触摸设备上，点击元素会同时触发click、focus以及模拟的mouseenter事件，但滚动时你只触发了mouseleave和document.activeElement.blur()，但可能没彻底清除元素的聚焦状态，而且单纯依赖mouseenter/mouseleave在触摸场景下的触发并不稳定，这就导致后续点击时事件被干扰，下拉菜单无法正常显示。

解决方案代码调整 #

咱们修改代码，同时适配鼠标和触摸交互，彻底处理聚焦问题：

// 同时绑定鼠标和触摸事件，适配多端交互
$('.custom-dropdown')
  // 鼠标移入/触摸开始时显示下拉
  .on('mouseenter touchstart', function(e) {
    // 阻止触摸时的默认行为，避免元素自动聚焦
    e.preventDefault();
    $(this).children('.dropdown-content').addClass('active');
  })
  // 鼠标移出/触摸结束时隐藏下拉
  .on('mouseleave touchend', function() {
    $(this).children('.dropdown-content').removeClass('active');
  })
  // 处理触摸设备的点击切换（避免单次触摸后状态异常）
  .on('click', function(e) {
    e.preventDefault();
    $(this).children('.dropdown-content').toggleClass('active');
  });

// 滚动时彻底重置下拉状态和聚焦
$(window).scroll(function () {
  // 让下拉菜单内所有元素失去焦点，彻底清除聚焦状态
  $('.custom-dropdown').find('*').blur();
  // 触发mouseleave事件隐藏所有下拉
  $('.custom-dropdown').trigger('mouseleave');
});

额外优化建议 #

• CSS适配触摸设备：给.custom-dropdown添加触摸高亮清除，提升体验：

.custom-dropdown {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

• 确保下拉样式正确：确认.dropdown-content.active的样式是明确的显示状态（比如display: block而非依赖visibility或opacity的半隐藏状态，避免触摸交互时的点击穿透）。

这样调整后，不管是桌面鼠标交互还是平板触摸交互，滚动后再次点击都能正常触发下拉菜单啦！

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