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);。我認爲這是大多數人這樣做的方式（還有其他嗎？）。