javascript - JQuery幻灯片等待变量未设置

Question

我对为什么这不起作用感到困惑，请有人指出我正确的方向吗？我写了一些 JQuery 来滑下一个子菜单。但是，当在菜单上移动鼠标时，它会触发数千个事件，我试图让它等待隐藏完成，然后再进行另一次向下滑动。但是，这似乎不起作用：

$("li.title").children('ul').hide();
var hidden = true;

$("li.title").hover(
    function() {
        if (hidden == true){
        var height = $(this).children('ul').height() + $(this).height();
        $(this).height(height);
        $(this).children('ul').slideDown();
        var hidden = false;
        }
   },
   function() {
        $(this).height(25);
        $(this).children('ul').hide(function() {
        var hidden = true;
        });
   }
);

Answer 1

在悬停的回调函数中var从变量中删除。hidden您正在本地重新分配这些变量，因此它不监听全局hidden变量。

改变这个：

var hidden = false;

对此：

hidden = false;

Answer 2

您需要删除var. 问题是您正在为hidden回调函数创建一个新实例，而没有看到全局hidden.

$("li.title").children('ul').hide();
var hidden = true,
    myTimeout;

$("li.title").hover(
    function() {
        clearTimeout(myTimeout);
        myTimeout = setTimeout(function(){
          if (hidden == true){
            var height = $(this).children('ul').height() + $(this).height();
            $(this).height(height);
            $(this).children('ul').slideDown();
            hidden = false; //Removed var here
          }
        },100);
   },
   function() {
        clearTimeout(myTimeout);
        myTimeout = setTimeout(function(){
        $(this).height(25);
        $(this).children('ul').hide(function() {
        hidden = true; //and here
        });
        },100);
   }
);