提问人：Pekka 提问时间：11/21/2009 最后编辑：Rob WPekka 更新时间：12/29/2011 访问量：1031
Javascript 下拉菜单小部件
Javascript drop down menu widget
问：
我在 Web CMS 中有一个由 <ul> 组成的菜单。 我希望多个菜单项具有显示在下拉列表中的子项。这些子项目也是 <ul>s。
这基本上很容易用几行 CSS 和 Javascript 来完成，但我正在寻找一个现成的 Javascript 解决方案来帮助我处理以下问题：
- 处理屏幕边缘情况：如果下拉菜单的任何部分位于当前视口之外，请将其放置在完全位于视口内的位置。
这是从头开始编写代码的婊子。
“很高兴拥有”将是：
下拉按钮下方居中定位
将 onclick 事件添加到正文中，以便在下拉菜单外单击将关闭它;之后完全删除 onClick 事件
但是如果有必要，我可以自己做。
一个漂亮、小巧、不显眼的小部件，可以神奇地转换我的<ul>会很可爱。
如果解决方案基于框架，它必须是原型，因为这是我在 CMS 中使用的。
答：
3赞
user215361
11/21/2009
#1
您可以获取 UL 的偏移量，并检查这些偏移量是否在视口的一定距离内。
// Pseudo code
var ul = document.getElementById("menu");
if(ul.offset.x + ul.width > viewport.width) {
ul.offset.x = viewport.width - ul.width;
}
也可以获得单击下拉按钮的确切位置，然后您应该应用基本的数学运算，以便将菜单放置在其下方。
评论
0赞
Pekka
11/22/2009
是的，这就是要走的路。然而，我从以前的经验中知道，正确地做到这一点（考虑到可滚动容器、绝对/相对定位等等），然后让它在所有浏览器中工作，往往会占用很多时间。我很想绕过那个:)
0赞
11/22/2009
在这种情况下，图书馆确实会有所帮助，不幸的是，我无法帮助您解决这些问题，因为我倾向于使用自己的图书馆。
评论