JQuery UI Position，行为奇怪，位置永远不变

Question

所以这是一个我已经和我斗争了几个星期的“虫子”，我终于到处寻求帮助。

所以，首先，我想要实现的是下拉菜单。我还没有编码，所以我想只是为了得到我会尝试的经验。我做了几个按钮：

之后我向所有人添加了一个mouseenter事件，并使用'for'属性作为指标检索相应的下拉菜单。我是这样做的：

var dropdown = $('.menu_dropdown[for="'+$(this).attr("id")+'"]');

它有效，它得到了正确的元素。然后我想把它放在按钮下面，但是失败了。我不明白为什么。我使用这段代码来定位它们：

dropdown.position({

                        my: "center top",
                        at: "center bottom",
                        of: $(this)

                    })

它给我这样的东西：

应该是在“Fanfictions”下，有人知道为什么这样做吗？我检查了按钮都有正确的大小等..下拉菜单上有“position：relative”样式。我试过没有，或者绝对的，都没有用。

我使用google CDN jquery + jquery ui版本。

如果你隐藏了下拉菜单，那么之后往往会更远。

感谢您提供任何提示或帮助！

Answer 1

我需要查看更多代码，但我相信您的问题可能是“$（this）”。

使用$（this）你可以获得元素本身的句柄，而不是按钮（如果我正确地解释你的代码）。

试试这个：

var button = $(this);
var dropdown = $('.menu_dropdown[for="'+ button.attr("id")+ '"]');
dropdown.position({

                        my: "center top",
                        at: "center bottom",
                        of: button

                    });

如果我遗失了某些内容，请告诉我。

Answer 2

我认为JavaScript不应该用于定位。我不知道你真正想要的是什么，但是我用这样的CSS（see fiddle）做了下拉，我希望它有所帮助：

HTML：

<ul>
    <li><a href="#">Menu1</a><div class="dropdown"></div></li>
    <li><a href="#">Menu2</a><div class="dropdown"></div></li>
    <li><a href="#">Menu3</a><div class="dropdown"></div></li>
</ul>

CSS：

li{float:left; position:relative;width:60px; height:20px;}
.dropdown{position:absolute; width:300px; height:200px; display:none;}
li:hover .dropdown{display:block;}

为了获得更好的用户体验，我使用jQuery hoverintent会增加延迟时间。