0

我有一个小提琴，它显示了我构建的菜单。

这是一个垂直菜单。我遇到的问题是<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({}) 代码以使 group-list 类响应并适合窗口内？

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

4

1 回答 1

2

如果我正确理解您的需求，希望这将回答您的问题。我将获得围绕您的完整点亮项目/菜单的包装器的总高度。然后将其与以下类似的变量进行比较：

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

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

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

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

于 2012-10-29T23:50:29.910 回答