简单的jquery下拉列表 - clearTimeout，setTimeout问题 [英] simple jquery dropdown - clearTimeout, setTimeout issues

问题描述

HTML：

<ul class="topnav">
    <li><a href="#"><span>One</span></a></li>
    <li><a href="#"><span>Two</span></a></li>
    <li>
        <li><a href="#"><span>Three</span></a></li>
        <ul class="subnav">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </li>
</ul>

jquery：

var timeout = null;

$(document).ready(function() {

    $("ul.topnav li").mouseover(function() {

        if (timeout) clearTimeout(timeout);

        $(this).find("ul.subnav").slideDown('fast').show();

    }).mouseout(function() {
        timeout = setTimeout(closemenu, 500);
    });

    // sub menu mouseovers keep dropdown open
    $("ul.subnav li").mouseover(function() {
        if (timeout) clearTimeout(timeout);
    }
    ).mouseout(function() {
        timeout = setTimeout(closemenu, 500);
        // alert(timeout);

    });

    // any click closes
    $(document).click(closemenu);
});

// Closes all open menus 
function closemenu() {
    $('ul.subnav:visible').hide();
    if (timeout) clearTimeout(timeout);
} 

我有超时问题。在使用中，如果我将鼠标悬停在三上，则下拉列表将永远保留下来。如果我鼠标悬停A，下拉菜单将永远保持不动，但如果我将鼠标悬停在B或任何更低的位置，菜单将关闭在我身上。如果你取消注释// alert（timeout）;它到达B，（和A），但超时将有一个值。为什么是这样？我认为clearTimeout会使超时变量无效

I'm having issues with timeout. In use, if i mouseover "Three", the dropdown stays out forever. if i mouseover "A", dropdown will stay out forever, but if I mouseover "B" or anything lower, the menu will close on me. if you uncomment "// alert(timeout);" it gets there for B, (and A) but timeout will have a value. why is this? i thought clearTimeout would null the timeout variable?

推荐答案

您可以使用 .hover（） 和 .data（） 这样：

You can simplify your code overall by using .hover() and .data() like this:

$(function() {
  $("ul.topnav li").hover(function() {
    var timeout = $(this).data("timeout");
    if(timeout) clearTimeout(timeout);
    $(this).find("ul.subnav").slideDown('fast');
  }, function() {
      $(this).data("timeout", setTimeout($.proxy(function() {
          $(this).find("ul.subnav").slideUp();
      }, this), 500));
  });
  $(document).click(function() {
      $('ul.subnav:visible').hide();
  });
});​

你可以在这里看到一个工作演示

Inste共享一个全局超时变量，这将设置超级每个顶级< li> ，每个都有一个独立的定时器，当您将鼠标悬停在该元素上时，只有其定时器被清除。另外 .hover（） 使用 mouseenter 和 mouseleave ，而不是 mouseover 和 mouseout ，区别在于您进入小孩或儿童之间， mouseenter doesn' t再次发生火灾，而 mouseleave 不会在我们关心的父级< li> 上触发。

Instead of sharing a global timeout variable, this sets a timeout per top level <li>, each one has an independent timer, and when you hover back over that element, only its timer is cleared. Also .hover() uses mouseenter and mouseleave, rather than mouseover and mouseout, the difference is when you go into a child or between children, mouseenter doesn't fire again, and mouseleave doesn't fire on the parent <li> we care about.

您可以使用上面的演示链接进行测试，我也将子项目添加到第一个菜单，以演示它们是独立的。如果您对 $。代理有疑问在那里，它只是在这个超时内的这个中，匿名函数指的是我想要的（当前的这个）...超时后需要关闭的元素。

You can test this with the demo link above, I added sub-items to the first menu as well, to demonstrate they're independent. If you happen to have question about the $.proxy in there, it's just making this inside that timeout anonymous function refer to what I want it to (the current this)...the element that needs closing after the timeout.

这篇关于简单的jquery下拉列表 - clearTimeout，setTimeout问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！