Question

我正在使用一个简单的jquery插件来实现Bootstrap 3中悬停效果的下拉列表。它在桌面和移动设备上完美运行（恢复到原始引导程序下拉行为）但是当用户在桌面上调整浏览器窗口大小时悬停仍然功能。我试图在导航栏崩溃后一起禁用它，这是在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();
});

Answer 2

也许这可以提供帮助：jQuery on window resize

如果我正确理解这一点，那个页面上的jQuery示例附加了一个＆＃34;监听器＆＃34;到窗口，并在窗口调整大小时执行。我相信你的问题是你的功能只运行一次 - 这就是为什么它的工作原理，如果页面已经是最小尺寸或更小。

稍微修改链接示例中的代码：

$(window).on('resize', function(){
    var win = $(this); //this = window
    if (win.width() > 768) { 
        $('.dropdown-toggle').dropdownHover(); 
    }
});

修改：实际上，如果您的价格低于768，则可能需要停用下拉菜单，而不是在您高于它时启用它。检查页面加载的宽度，并添加调整大小监听器。当你加载大于768的页面时，这解决了你的问题。我会回复你对其他答案的评论，但我还没有足够的代表。

// Pseudocode
if (window width < 768) {
   Disable dropdown menu
}

// Semi-pseudocode
$(window).on('resize', function(){
    var win = $(this); //this = window
    if (win.width() < 768) { 
        // Disable dropdown menu 
    }
});

Answer 3

您的初始化代码只在页面加载后执行一次。当您调整浏览器大小时，页面不会重新加载，因此不会再次执行。

方法1：您可以在浏览器窗口上侦听resize事件，并根据新的宽度调整布局。它可能看起来像这样：

var dropDownsActive = false;
var handleDropDowns = function() {
    if ($(window).width() > 768 && !dropDownsActive) {
        $('.dropdown-toggle').dropdownHover();
        dropDownsActive = true;
    } else if($(window).width() <= 768 && dropDownsActive) {
        // TODO: destroy/reset the dropdowns here, if possible
        dropDownsActive = false;
    }
}

jQuery(window).resize(handleDropDowns);
jQuery(window).ready(handleDropDowns);

还有一个问题：如果你回到一个狭窄的窗口，下拉菜单已经初始化，可能不会消失。你必须找到一种方法来销毁插件（如果它支持它），或者你可以尝试用原始HTML替换下拉元素。

方法2：您也可以强制执行并在调整大小时重新加载整个页面：

var previousWindowWidth = $(window).width();
jQuery(window).resize(function() {
    if ($(window).width() > 768 && previousWindowWidth <= 768 || $(window).width() <= 768 && previousWindowWidth > 768) {
        window.location.reload();
    }
    previousWindowWidth = $(window).width();
});

但这可能会产生一些不必要的副作用，例如输入数据或其他动态状态丢失，当然还有页面闪烁。

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

3 个答案: