Bootstrap 3.36移动端二级下拉菜单JS脚本resize失效求助

我明白你的问题了——当窗口从桌面尺寸缩小到移动端后，再放大回去，菜单的交互就乱了对吧？这是因为你只处理了移动端的绑定逻辑，没在窗口回到桌面尺寸时清理之前的事件绑定，也没加上桌面端的悬停触发逻辑。

下面是修正后的完整代码，我会逐段解释：

$(document).ready(function () {

  function checkWidth() {
    var windowWidth = $(window).width();
    var $dropdownLinks = $('ul.nav li > a.nav-dropdown');
    
    if (windowWidth <= 992) {
      // 移动端逻辑：绑定点击事件，切换open类，阻止默认跳转
      $dropdownLinks.off('click hover') // 先解绑之前的所有事件，避免冲突
                    .each(function() {
                      // 先保存原始href到data属性，方便后续恢复
                      if (!$(this).data('original-href')) {
                        $(this).data('original-href', $(this).attr('href'));
                      }
                    })
                    .click(function (e) {
                      e.preventDefault(); // 阻止默认跳转，比直接移除href更灵活
                      $(this).parent().toggleClass("open");
                    });
    }
    else {
      // 桌面端逻辑：解绑点击事件，恢复默认行为，添加悬停触发
      $dropdownLinks.off('click') // 移除移动端的点击绑定
                    .each(function() {
                      // 恢复原始href属性
                      var originalHref = $(this).data('original-href');
                      if (originalHref) {
                        $(this).attr('href', originalHref);
                      }
                    })
                    .parent().removeClass("open") // 确保菜单收起
                    .hover(function() {
                      // 鼠标进入时展开下拉
                      $(this).addClass("open");
                    }, function() {
                      // 鼠标离开时收起下拉
                      $(this).removeClass("open");
                    });
    }
  }

  // 页面加载时初始化一次
  checkWidth();
  // 窗口 resize 时触发，添加防抖优化性能
  $(window).resize(function() {
    clearTimeout(window.resizeTimeout);
    window.resizeTimeout = setTimeout(checkWidth, 250);
  });

});

关键修正点说明： #

• 事件解绑：在切换设备尺寸时，先通过off()移除之前绑定的所有相关事件，避免重复绑定导致的交互冲突。
• href安全处理：用data('original-href')保存原始链接，比直接removeAttr更稳妥，能在桌面端精准恢复链接的跳转功能。
• 防抖优化：窗口resize事件会频繁触发，加个250ms的延迟定时器，减少不必要的逻辑执行，提升页面性能。
• 悬停逻辑实现：桌面端通过hover()方法绑定鼠标进入/离开事件，控制open类的添加和移除，完美实现悬停触发下拉的需求。

这样调整后，不管窗口怎么缩放，菜单的交互都会自动适配对应的设备尺寸，不会出现脚本失效的问题了。

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