jquery窗口调整大小功能仅触发一次而不是每次调整大小

Question

我正在尝试设置一个 jquery 函数来检查窗口宽度，以便导航栏正常工作。我想要发生的是：如果屏幕宽度大于 大于 949 像素，则启动一个功能，使悬停在 .dropdown 锚链接上打开一个下拉子菜单；如果屏幕宽度小于或等于 949px，请删除该功能，以便必须单击 .dropdown 锚链接才能打开下拉子菜单（下拉链接默认打开时单击它们-我认为这是一个引导组件）。

我根据在 stackoverflow 上找到的一些类似示例创建了一些函数，但发现该函数仅在屏幕宽度超过 949 像素时触发，因此在较小的宽度下，.dropdown 锚仍然通过悬停打开子菜单，这就是我不要。

var width = $(window).width();
$(window).resize(function(){
  if($(this).width()>949){
    $(".dropdown").hover(function(){
      $(this).addClass("open");
    },
    function(){
      $(this).removeClass("open");
    });
  }
});

如何改进此功能，使 .dropdown 悬停功能在 949 像素以上添加并在 949 像素及以下移除？

Answer 1

与其添加和删除绑定，不如在做任何事情之前建立事件绑定并检查大小：

$(".dropdown").hover(function() {
    if ($(window).width() > 949) {
        $(this).addClass("open");
    }
}, function() {
    if ($(window).width() > 949) {
        $(this).removeClass("open");
    }
});

如果您添加和删除事件处理程序，您需要防止这样做两次（例如，它们调整为 980，然后调整为 1050）。

var hover_added = false;

$(window).resize(function() {
    var width = $(this).width();
    if (width > 949 && !hover_added) {
        $(".dropdown").on({
            mouseenter: function () {
                $(this).addClass("open");
            },
            mouseleave: function () {
                $(this).removeClass("open");
            }
        });
        hover_added = true;
    } else if (width <= 949 && hover_added) {
        $(".dropdown").off("mouseenter mouseleave");
        hover_added = false;
    }
});

Answer 2

可能并不完美，因为 jquery 不是我的强项，但它可以胜任：

var width = $(window).width();
$(window).resize(function(){
  if($(this).width()>949){
    $(".dropdown").on({
        mouseenter: function () {
            $(this).addClass("open");
        },
        mouseleave: function () {
            $(this).removeClass("open");
        }
    });
  }
  else{
    $(".dropdown").off("mouseenter");
    $(".dropdown").off("mouseleave");
  }
});

请注意，此实现还将删除 .dropdown 元素上的任何其他现有 mouseenter 和 mouseleave 事件处理程序。

Answer 3

我的建议是（为了避免多次绑定同一个事件）：

var width = $(window).width();

$(window).on('resize', function(e) {
  doResize(e);
});

function doResize(e) {
  if ($(this).width()>949) {
    var isOpenOnHover = $('.dropdown-toggle').data('isOpenOnHover');
    if (isOpenOnHover) {
      return;
    }
    $('.dropdown-toggle').data('isOpenOnHover', true);
    $('.dropdown-toggle').hover(function () {
      $('.dropdown-toggle').trigger('click.bs.dropdown');
    });
  } else {
    $('.dropdown-toggle').data('isOpenOnHover', false);
    $('.dropdown-toggle').off('mouseenter mouseleave');
  }
}

$(function () {
  $('.dropdown-toggle').data('isOpenOnHover', false);
  doResize();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>



<div class="bs-example">
    <div class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
        </ul>
    </div>
</div>