Question

我尝试在鼠标悬停时显示/隐藏下拉菜单，然后单击桌面视图。并且，我使用了$(window).resize函数。并且，它确实起作用。

我的问题是-在这里，仍然会在小视图上触发mouseover函数。如果，我尝试使用$('element').off('mouseover');函数。因此，它工作正常。但是，这里不起作用我们的另一个鼠标悬停功能。

因此，如何在小视图上停止触发mouseover功能。

中的演示

$(window).on('resize', function() {
  var screensize = $(window).width();
  if (screensize > 600) {
    $(".drop").on("mouseover", function() {
      $('.dropdown-content').stop().slideDown('fast');

      $(this).bind('mouseleave', function() {
        $('.dropdown-content').stop().slideUp('fast');

      });
    });
  } else {
    $(".drop").on("mouseover", function() {
      $(this).css('background', 'red');
    });

    $(".drop").on("click", function() {
      $('.dropdown-content').stop().slideToggle('fast');
    });
  }
}).resize();

.drop {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="drop">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

Answer 1

在我看来，可以仅通过从mouseover事件执行回调时检查宽度来简化此操作。

var dropIsDown = false;
$(".drop").on("mouseover", function() {
   if ($(window).width() > 600) {
      $('.dropdown-content').stop().slideDown('fast');
      dropIsDown = true;
   } else {
      $(this).css('background', 'red');
   }
 });

$(".drop").on("mouseleave", function() {
   if (dropIsDown) { 
      $('.dropdown-content').stop().slideUp('fast');
      dropIsDown = false;
    }
 });

Answer 2

您应该将逻辑放入函数中，并在document.ready和resize函数中调用一次。您还需要使用off删除事件绑定，以删除先前的绑定事件。这将为您工作：

function mouseOverHandler() {
$(".drop").off().on("mouseover", function () {
    if ($(window).width() > 600) {
        $('.dropdown-content').stop().slideDown('fast');
        $(this).bind('mouseleave', function () {
            $('.dropdown-content').stop().slideUp('fast');
        });
    }
    else {
        $(this).css('background', 'red');
        $(".drop").off().on("click", function () {
            $('.dropdown-content').stop().slideToggle('fast');
        });
    }
});
}
 mouseOverHandler();
 $(window).resize(function () {
 mouseOverHandler();
});

jQuery mouseover函数在$（window）.resize之后仍然触发

2 个答案: