Question

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

我根据我在stackoverflow上找到的一些类似的例子创建了一些函数，但是发现只有在屏幕宽度超过949px时该函数才会触发，所以在较小的宽度下.dropdown锚点仍然通过悬停打开子菜单，这就是什么我不想要。

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

如何改进此功能，以便在949px以上的宽度上添加.dropdown悬停功能，并在949px及以下删除？

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

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

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

jquery窗口调整大小函数只触发一次而不是每次调整大小

3 个答案: