爲什麼appendTo不能在另一個DIV中的DIV上工作

Question

我想在鼠標懸停上移動其他DIV之間的「菜單DIV」。但是，當我將鼠標移動到某個DIV的外面時，「菜單DIV」就會消失。

的jsfiddle DEMO： http://jsfiddle.net/ynternet/HhzVC/

HTML

<div id="menu"> 
    <a href="#">Link</a> 
    <a href="#">Link</a> 
</div> 
<div id="container"> 
    <div id="divA"><br>&nbsp;</div> 
    <br> 
    <div id="divB"><br>&nbsp;</div> 
    <br> 
    <div id="divC"><br>&nbsp;</div> 
    <br> 
    <div id="divD"><br>&nbsp;</div> 
</div> 

CSS

#menu{ 
    position: absolute; 
    background-color: yellow; 
} 
#divA{ 
    background-color: blue; 
} 
#divB{ 
    background-color: red; 
} 
#divC{ 
    background-color: cyan; 
} 
#divD{ 
    background-color: brown; 
} 

JQUERY

$("#container div").live({ 
    mouseover: function() { 
     $('#menu').appendTo($($(this))); 
    } 
}); 

Answer 1

#menu只要鼠標懸停在這樣的匹配元素上，就會被移動到選擇器$("#container div")的結果中。 #menu本身，作爲一個div，一旦它被移動到這樣一個元素中，它也匹配$("#container div")。

有幾個選項可以避免這種情況，但最直接的是在匹配選擇器爲#menu時明確不執行操作。

$("#container div").live({ 
     mouseover: function() { 
      if($(this).closest("#menu").length){ return; } 
      $('#menu').appendTo($(this)); 
     } 
});​ 

注意，這整個操作也許可以更好的JavaScript沒有完成，僅通過隱藏/顯示在:hover現有菜單，使用CSS，而不是移動文件圍繞一個菜單。