jquery - 使菜单响应

Question

我有一个 fiddle显示我构建的菜单。

这是一个垂直菜单。我遇到的问题更多 <li> s 我添加到菜单中，越难适应屏幕。

例如:顶部菜单项 (A) 的大部分内容都超出了屏幕。想象一下，如果菜单有很多项(a、b、c、d ...z)，底部菜单项 (z) 会超出屏幕底部。

为了解决我的问题，假设菜单中间的菜单项有很多元素。这也将延伸到屏幕顶部。这不是我想要的。实际上，我希望弹出菜单能够响应其周围的窗口并将其自身放入其中。

我已经开始告诉每个小组在它显示自己之前将自己居中:

var groupList = $(e.target).find('.group-list');
groupList.css({
    'margin-top': (-groupList.height() / 2) + 'px'
});
groupList.show();

不幸的是，这还不够。但是，我不确定如何让每个人都知道它周围的窗口，并做出足够的响应以适应窗口。

我如何重写我的 groupList.css({}) 代码以使组列表类响应并适合窗口？

编辑:我为这么罗嗦道歉。我想解释一下我遇到的设计问题，以便你们都能理解并希望为我指明正确的方向。

Answer 1

如果我正确理解您的需求，希望这能回答您的问题。我会得到围绕您的完整 lits 元素/菜单的包装的总高度。然后将它与以下变量进行比较:

Var height = $(document).height();//获取文档高度Var width = $( window).width();

//然后随时将其与您的列表高度进行比较。如果高度达到您想要的限制点，则创建一个新列并将您的列表附加到它。这样它总是在调整大小并且永远不会卡在窗口视口(viewport)之外。

然后您将创建弹出列表项所在的第二个框。将其与文档高度进行比较，并将底部 css 设置为 0px。

如果这没有帮助，请随时发送电子邮件至 generic_brand@ymail.com，我将创建一个片段来向您展示我的解释示例。编码愉快，祝你好运!