Question

当鼠标进入DOM的某个部分以显示菜单时，我正在编写一个函数来删除内容为display:hidden;的类。现在，当页面加载并且我最初悬停在该区域上时，事件不会触发。但是，如果我将鼠标移动一次，移开，然后移回目标元素。它很好，菜单是隐藏的。

codepen：http://codepen.io/anon/pen/EWYevq

jQuery：

$(document).ready(function() {
      $('#kDropdown, .hidden-dropdown' ).mouseleave(function(e) {
        window.k = setTimeout(function(){
           $('.hidden-dropdown').addClass("hide_k");
        }, 250)
      }).mouseenter(function(e) {
        if(window.k){
          console.log("test")
          clearTimeout(window.k)
          $(".hidden-dropdown").removeClass("hide_k");
        }
      });
    })

Answer 1

修改：即使将window.k与任何内容进行比较，它仍然有效。我高度怀疑这种情况是否是强制性的。

在您的特定情况下：

window.k当您第一次悬停该框时，会返回undefined（false）值，＆＃39;为什么它无法传递条件 - 列表没有出现。

检查 codepen ，打开控制台并将鼠标悬停在框中。第一个日志将是undefined值。

如果您将该框悬停在秒时间，则系统会显示该列表，因为window.k功能中已设置mouseleave() - 它不会返回{ {1}}（假）从现在开始。

工作解决方案：

＆＃13;

undefined

＆＃13;

$(document).ready(function() {
  $('#kDropdown, .hidden-dropdown').mouseleave(function(e) {
    window.k = setTimeout(function() {
      $('.hidden-dropdown').addClass("hide_k");
    }, 250);
  }).mouseenter(function(e) {
    console.log("test")
    clearTimeout(window.k)
    $(".hidden-dropdown").removeClass("hide_k");
  });
})

＆＃13;

.hide_k {
  display: none;
}

＆＃13;

Answer 2

你确定需要这条线吗？

if(window.k) {

第一次输入时，未分配该变量，因此不会触发该事件。如果删除该行，效果将按预期工作。

Answer 3

它没有第一次开火，因为还没有window.k。

一旦mouseleave被分配。所以第二次在病房工作。

要完成这项工作，请将$(".hidden-dropdown").removeClass("hide_k");移出if(window.k)条件。

这是一个有效的Code Pen

＆＃13;

$(document).ready(function() {
  $('#kDropdown, .hidden-dropdown').mouseleave(function(e) {
    window.k = setTimeout(function() {
      $('.hidden-dropdown').addClass("hide_k");
    }, 250)
  }).mouseenter(function(e) {
    if (window.k) {
      clearTimeout(window.k)
    }
    $(".hidden-dropdown").removeClass("hide_k");
  });
})

＆＃13;

.hide_k { display: none; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='kDropdown' style="background-color: black; height: 100px; width: 100px;"></div>

<div class="hide_k hidden-dropdown">
  <ul>
    <li>LIST</li>
    <li>THAT</li>
    <li>IS</li>
    <li>HIDDEN</li>
  </ul>
</div>

＆＃13;

Answer 4

它第一次不工作的原因是因为你还没有设置window.k。改变这个：

$('#kDropdown, .hidden-dropdown' ).mouseleave(function(e) {
    window.k = setTimeout(function(){

到此：

window.k=true;
$('#kDropdown, .hidden-dropdown' ).mouseleave(function(e) {
        window.k = setTimeout(function(){

发生的事情是你在mouseenter上检查是否（window.k）{}，当第一次“enter”发生时，还没有发生mouseleave设置window.k。因此，你的if（window.k）check in mouseenter第一次返回false。但是你离开框，window.k得到设置，然后它从那里工作，因为你的if（window.k）语句然后返回true（因为第一个mouseleave事件最终设置它）。希望有道理！基本上这是一个计时问题，你只需要在做其他任何事情之前设置window.k = true。

第一次调用事件时，mouseenter事件处理程序不起作用

4 个答案:

在您的特定情况下：