Question

我有以下jQuery代码。

$(".item").hover(function(){
  $(this).find('.item-hover').css("display","block");
  }, function(){
  $(this).find('.item-hover').css("display","none");
});

我希望仅当屏幕尺寸大于768时，此jQuery代码才能工作。

我尝试了以下方法，但并没有帮助我。

 $(window).resize(function() {
   if ($(this).width() >= 768) {
    $(".item").hover(function(){
      $(this).find('.item-hover').css("display","block");
      }, function(){
      $(this).find('.item-hover').css("display","none");
    });
  }

Answer 1

当前，每次调整窗口大小时，您都将附加mouseenter / mouseleave处理程序，您不想这样做。

仅在调用mouseenter事件处理程序本身时检查窗口的宽度。

另一注：使用window.matchMedia()而不是选中$(window).width()作为latter cannot always be relied on：

$(".item").hover(function(){
    if(window.matchMedia('(min-width: 768px)').matches){
        $(this).find('.item-hover').css("display","block");
    }
}, function(){
    $(this).find('.item-hover').css("display","none");
});

已经说过，already highlighted（假设您不需要它来实现此处未描述的功能），则根本不需要使用JavaScript。只需一点CSS就可以完成这项工作：

.item .item-hover{
    display: none;
}

@media (min-width: 768px){
    .item:hover .item-hover{
        display: block;
    }
}

根据屏幕大小禁用jQuery

1 个答案: