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位置，行为奇怪，位置绝不相同

回答

相关问题