JQuery多个ID隐藏1格

Question

我正在处理一个个人项目，只是遇到了一些麻烦。

我想做一个简单的悬停菜单。

想法是当用户将鼠标悬停在列表元素上时，它显示一个div，以及鼠标悬停在div上的位置或最初在div上悬停的元素消失。例如

。

当您将鼠标悬停在其中一个div上时。

<ul> 
<li>Link 1</li> 
<li>Link 2</li> 
</ul> 

<div id="link1div"><div id="link1innercontent"></div></div> 
<div id="link2div"></div> 

现在，当你将鼠标悬停在li上时，div出现，当鼠标移动到div上时，div消失。

我想要做的是当你鼠标与李或div的div消失。我遇到了麻烦，因为当我尝试这样做时，两个div都消失了。

我下面的代码：

<div id="menu"> 
<ul> 
         <li id="link_1">Link 1</li> 
         <li id="link_2">Link 2</li> 
        </ul> 
</div> 

<div id="link_1"><div id="link1innercontent"></div></div> 
    <div id="link_2"></div> 

$("#menu li").hover(function(){ 
var name1 = $(this).attr('id'); //ignore these, they are for selecting appropriate ids 
var name = name1.split('_'); //ignore these, they are for selecting appropriate ids 
openMenu(name[1]); 
$("#m_"+name[1]).mouseleave(function(){ // I have tried $("#m_"+name[1]+",#"+name1) but it 
closeMenu(name[1]);      // hides the div before you can access it. 
}); 
}); 


function openMenu(name){ 
$("#m_"+name).slideDown(); 
} 

function closeMenu(name){ 
$("#m_"+name).slideUp();  
} 

任何帮助将不胜感激。

Answer 1

你不能用一个ID为两个元素，你应该使用类代替：

<div id="menu"> 
<ul> 
<li class="link_1">Link 1</li> 
<li class="link_2">Link 2</li> 
</ul> 
</div> 

<div class="link_1"><div id="link1innercontent"></div></div> 
<div class="link_2"></div> 

$("#menu li").hover(function(){ 
    var name1 = $(this).attr('class'); 
    var name = name1.split('_'); //ignore these, they are for selecting appropriate ids 
    $('div.' + name[1]).slideDown() 
    }, function() { 
    $('div.' + name[1]).slideup() 
}); 

Answer 2

奇怪的JavaScript你在这里。 :)这是我的想法：你想div消失当鼠标离开div或li？所以，因为你不能在同一时间超过两个（一个接一个地通过鼠标将触发mouseleave事件），这里是你必须做的：

设置超时变量var t = setTimeout(...)当鼠标离开div OR li（例如500米利斯）。在此之后隐藏div（在setTimeout处理程序中执行此操作）。

现在，当您将鼠标移动到div或li时，请清除此超时值：clearTimeout(t);。我认为这是大多数人这样做的方式（还有其他吗？）。