JQuery UI Position，行為奇怪，position 不一樣

Question

所以這是一個我已經與之斗爭了幾個星期的“錯誤”，我終於來尋求幫助。

所以，首先，我想要實現的是一個下拉菜單。 我還沒有編寫代碼，所以我想只是為了獲得我會嘗試的經驗。 我做了幾個按鈕：

之后，我為它們添加了一個 mouseenter 事件，並使用“for”屬性作為指示符檢索了相應的下拉菜單。 我這樣做：

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

它有效，它得到了正確的元素。 然后我想在按鈕下方 position 它，但失敗了。 我不知道為什么。 我用這個代碼來 position 他們：

dropdown.position({

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

                    })

它給了我這樣的東西：

它應該在“Fanfictions”下，有人知道為什么會這樣嗎？ 我檢查了所有按鈕的大小是否正確等。下拉菜單上有“位置：相對”樣式。 我試過沒有或絕對沒有，兩者都沒有工作。

我使用谷歌 CDN jquery + jquery ui 版本。

如果你隱藏下拉菜單，它往往會在之后更遠的 go 。

感謝您的任何提示或幫助！

Answer 1

我需要查看更多代碼，但我相信您的問題可能是“of: $(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 像這樣（見小提琴）做下拉菜單，我希望它有幫助：

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 ，它增加了 hover 的延遲。