javascript - jQuery 鼠标悬停函数在 $(window).resize 之后仍然触发

Question

我尝试在桌面鼠标悬停时显示/隐藏下拉菜单，然后单击小菜单 看法。而且，我使用了 $(window).resize 函数。而且，它确实有效。

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

那么，我怎样才能停止在小 View 上触发 mouseover 功能。

演示在此 JS fiddle

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

在我看来，这可以通过在从鼠标悬停事件执行回调时检查宽度来简化。

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