JQuery UI位置，行爲奇怪，位置絕不相同

所以這是一個我一直與之戰鬥了幾個星期的'錯誤'，我終於到處尋求幫助。JQuery UI位置，行爲奇怪，位置絕不相同

所以，首先，我試圖實現的是一個下拉菜單。我還沒有編碼，所以我想只是爲了獲得我想嘗試的體驗。我做了幾個按鈕： Buttons

然後，我添加了一個mouseenter事件到他們所有人，並檢索相應的下拉菜單使用'for'屬性作爲指標。我這樣做：

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

它的工作原理，它得到正確的因素。然後我想把它放在按鈕的下方，但是失敗了。我不知道爲什麼。我用這個代碼來定位他們：

dropdown.position({ 

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

        })

它給了我這樣的事情： Misplaced dropdown

應該是正確的在「Fanfictions」，沒有人知道爲什麼它這樣做？我檢查了所有的按鈕都有合適的尺寸等。下拉菜單上有「位置：相對」的樣式。我嘗試沒有，或與絕對，都沒有工作。

我使用谷歌CDN jQuery + jQuery UI版本。

如果您將下拉菜單隱藏起來，那麼它往往會更遠。

謝謝任何提示或幫助！

來源

2011-08-12 Neikos

我相信JavaScript不應該用於定位。我不知道是不是你真正想要的或沒有，但我做的下拉菜單，像這樣（see fiddle）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，它增加了懸停延遲。

來源

2011-08-12 16:46:00 Mohsen

感謝hoverintent插件，非常有用！ – Neikos

我需要看到更多的代碼，但我相信你的問題可能是「$（this）」。使用$（this）你得到了一個處理元素本身而不是按鈕（如果我正確地解釋你的代碼）。

試試這個：

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

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

        });

讓我知道如果我失去了一些東西。

來源

2011-08-12 16:29:47 tribe84

這可悲，沒有工作。 – Neikos

JQuery UI位置，行爲奇怪，位置絕不相同

回答

相關問題