JQuery UI Position，行为奇怪，位置永远不一样答案

【问题标题】：JQuery UI Position, behaving strangely, position is never the sameJQuery UI Position，行为奇怪，位置永远不一样
【发布时间】：2011-08-13 00:46:00
【问题描述】：

所以这是一个我已经与它斗争了几个星期的“错误”，我终于来寻求帮助。

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

之后，我为它们添加了一个 mouseenter 事件，并使用“for”属性作为指示符检索了相应的下拉菜单。我是这样做的：

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

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

dropdown.position({

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

                    })

它给了我这样的东西：

它应该在“Fanfictions”下，有人知道为什么会这样吗？我检查了所有按钮的大小是否正确等。下拉菜单上有“位置：相对”样式。我试过不带或带absolute，两者都不起作用。

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

如果您将下拉菜单隐藏起来，之后它往往会走得更远。

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

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案1】：

我认为 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，它增加了悬停的延迟。

【讨论】：

感谢 hoverintent 插件，非常有用！

【解决方案2】：

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

使用 $(this) 您可以处理元素本身而不是按钮（如果我正确解释了您的代码）。

试试这个：

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

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

                    });

如果我遗漏了什么，请告诉我。

【讨论】：