javascript - 调整浏览器窗口大小时禁用 jquery 插件

Question

我正在使用一个简单的 jquery 插件在 Bootstrap 3 中实现悬停下拉效果。它在桌面和移动设备上都能完美运行(恢复到原始的 Bootstrap 下拉行为)，但是当用户在桌面上调整浏览器窗口的大小时，悬停仍然起作用。在我的 768px 导航栏崩溃后，我试图将其全部禁用。

我正在使用以下插件:https://github.com/CWSpear/bootstrap-hover-dropdown

我最终使用了以下解决方案:

$(function () {
  if ($(window).width() > 768) {
    $('.dropdown-toggle').dropdownHover();
  }
});

但我无法让它完美工作，现在如果您以 768px 或更低的分辨率刷新页面，插件不会触发(下拉菜单在鼠标单击时起作用)，但如果您从更大的尺寸缩小，它会继续触发。如果有人能提供帮助，我只是有点力不从心。

Answer 1

你的函数只会在 dom 就绪时运行一次: http://learn.jquery.com/using-jquery-core/document-ready/

最简单的解决方案是在调整窗口大小后检查此情况

$(function () {
  var $window = $(window),
      $toggle = $('.dropdown-toggle'),
      isActive = false;

  function onResize() {
      if (!isActive && $window.width() > 768) {
        $toggle.dropdownHover();
        isActive = true;
      } else {
        // stop the dropdown
        isActive = false;
      }
  }

  $window.resize(onResize);
  // call once on start up
  onResize();
});