Question

我有fiddle，显示我制作的菜单。

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

例如：顶部菜单项（ 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（{}）代码以使group-list类响应＆amp;适合在窗户内？

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

Answer 1

希望如果我正确理解你的需要，这将回答你的问题。我将得到一个包装器的总高度，它位于你的完整的物品/菜单周围。然后将它与somthing的变量进行比较，如下所示：

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

//然后始终将其与列表高度进行比较。如果高度达到所需限制点，则创建一个新列并将列表追加到该列。这样它总是调整大小，永远不会挂在窗口视图端口之外。

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

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