setTimeout 与多个项目

Question

我尝试对多个具有 ul 和 li 的 li 项目设置一个 setTimeout 函数。幻灯片动画效果很好，但我想在再次关闭 slideUp 之前有一个延迟。但它不起作用。幻灯片下降但没有再次上升。我认为这是因为我必须为每个 li ul （索引）设置索引 setTimeout 函数。但我不知道如何让它工作。谁能指出我正确的方向？谢谢！

var menu = $('#menu').find('li').has('ul'); 
var timer;
menu.on('mouseenter', function(){
  clearTimeout(timer);
  $(this).find('>ul').stop().slideDown();                       
});

menu.on('mouseleave', function(){
  clearTimeout(timer);
  timer = setTimeout(function() {
    $(this).find('>ul').stop().slideUp();
  },1000);
});

Answer 1

问题是你有多个 lis，它们会取消打开的。您需要为每个 li 分配超时，或者您需要查看它们是否是另一个 li 打开以关闭它。

var lis = $('#menu').find('li').has('ul');

lis.on('mouseenter', function(){
    var li = $(this);
    var timer = li.data("timer");    
    clearTimeout(timer);
    $(this).find('>ul').stop().slideDown();                         
});

lis.on('mouseleave', function(){
    var li = $(this);
    var timer = setTimeout(function() {
            $(this).find('>ul').stop().slideUp();
        },1000);
    li.data("timer", timer);
});