我有一个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();字符串
不幸的是，这还不够，然而，我不确定如何让每个人都意识到它周围的Windows，并做出足够的React来适应Windows。
我如何重写我的groupList.css（{}）代码，使group-list类响应并适合窗口？
1条答案
按热度按时间g6baxovj1#
我会得到一个 Package 器的总高度，它围绕着你的完整的lits项目/菜单。然后将它与下面的变量进行比较：
字符串
然后将它与你的列表高度进行比较，如果高度达到了你想要的极限，那么就创建一个新的列，并将你的列表附加到它上面，这样它就总是被移除，永远不会挂在windows的视图端口之外。
然后创建第二个框，弹出列表项在其中。将其与文档高度进行比较，并将底部css设置为0 px。