javascript – JQuery UI Position,行为奇怪,位置永远不变

2023年11月27日 245次阅读

所以这已经是我已经打了几个星期的“虫子”了,我终于到处寻求帮助.

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

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

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

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

dropdown.position({

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

                    })

它给了我这样的东西：

它应该在“Fanfictions”下是正确的,有谁知道它为什么这样做？我检查了按钮都有正确的大小等..下拉菜单上有“position：relative”样式.我试过没有,或绝对,两个都没有工作.

我使用谷歌CDN jquery jquery ui版本.

如果你隐藏了下拉菜单,那么之后往往会更进一步.

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

最佳答案 我相信JavaScript不应该用于定位.我不知道你真正想要的是什么,但是我喜欢这样的下拉菜单(
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会增加延迟时间.

点赞