jquery - 为什么 appendTo 在另一个 DIV 中的 DIV 上不起作用

Question

我想在鼠标悬停时在其他 DIV 之间移动“菜单 DIV”。但是，当我将鼠标移到某个 DIV 之外时，“菜单 DIV”就会消失。

JSFIDDLE 演示：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;
}

查询

$("#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 隐藏/显示现有菜单，而不是在文档中移动单个菜单。