Bootstrap with jQuery - 下拉悬停的屏幕分辨率问题答案

【问题标题】：Bootstrap with jQuery - Screen Resolution issue with Dropdown hoverBootstrap with jQuery - 下拉悬停的屏幕分辨率问题
【发布时间】：2015-07-02 20:51:36
【问题描述】：

我在 Bootstrap Menu hOver 中使用 jQuery 来延迟关闭菜单。

但现在的问题是，当我以较低的分辨率检查相同内容时，仍然会出现悬停状态。我想停止低分辨率下拉菜单的悬停状态...例如：768px。不幸的是，我不能对代码进行太多更改。 :(

jQuery

/* Time Delay on Main Menu */   
        /* Main Menu */
        $('ul.nav li.dropdown').hover(function() {
          $(this).find('.pulse-dropdown').stop(true, true).delay(0).fadeIn(0);
        }, function() {
          $(this).find('.pulse-dropdown').stop(true, true).delay(300).fadeOut(300);
        });

        /* Sub Menu */
        $('li.dropdown-submenu').hover(function() {
          $(this).find('.pulse-dropdown2').stop(true, true).delay(0).fadeIn(0);
        }, function() {
          $(this).find('.pulse-dropdown2').stop(true, true).delay(200).fadeOut(200);
        });

【问题讨论】：

标签： jquery twitter-bootstrap

【解决方案1】：

您可以尝试使用 jQuery 的 width() 函数检查窗口的宽度，并仅在窗口大于 768px 时附加监听 hover 事件，如下所示：

if ($(window).width() > 768) {
    /* Sub Menu */
    $('li.dropdown-submenu').hover(function() {
      $(this).find('.pulse-dropdown2').stop(true, true).delay(0).fadeIn(0);
    }, function() {
      $(this).find('.pulse-dropdown2').stop(true, true).delay(200).fadeOut(200);
    });

}

【讨论】：