javascript - 当页面上没有足够的空间时如何使下拉菜单上升 - HTML/Javascript

Question

我正在寻找一种方法，当页面上没有足够的空间来完整查看下拉菜单时，它会向上显示。我只使用 HTML、Javascript、CSS 和 JQuery。

谢谢你的帮助。

-林恩

Answer 1

非常不清楚您在寻找什么，但我假设您想在屏幕上没有足够的空间时修改下拉菜单的位置。您最好的选择是检查您的 javascript 以查看您的下拉列表(即它的高度)是否大于窗口的高度。如果不是，请不要担心(假设位置正确)。如果它更大，为下拉菜单设置一个新位置(假设它是绝对定位，取决于你想要它多高，它可以像将 top 属性设置为 0 一样简单。每次加载文档时都应该执行此操作.

个人最好完全避免这种情况，下拉列表永远不要到达，更不要说超过网站的尺寸了。它会对您网站的用户体验产生负面影响。

编辑: 根据更多信息，这是我根据我对您的问题的理解会做的事情。通常下拉菜单的样式是绝对定位的，尽管要找出它们的确切位置，它始终相对于您的主要导航(您的下拉菜单将从那里下拉)。所以知道这一点后，我会在 jquery/js 脚本中模拟这个逻辑。这是高级逻辑:

$(<your main navigation's section>).hover(function(){
//logic for hover in
    <show drop down (opacity:1 or display:block)>
    if(menu position is greater or equal to 50% of screen){ //this means that menu is located in bottom of screen
    <display drop down below navigation>
    }else{ //menu position is less than 50$ of screen (menu is located in top half of screen
    <display drop down above navigation>
    }
}, function(){
//logic for hover out
});

显示下拉列表的逻辑只不过是一个简单的 jquery 调用来显示下拉容器(通过重新定义容器样式的不透明度或显示参数)。要知道将下拉菜单放在哪里，这是您的逻辑:

• 如果 高于 您的主导航，获取主导航的 y 位置并减去下拉菜单的高度(使用 jquery/js 检索所有这些值)。在你的下拉菜单和你的主导航之间给或取一个偏移量，你有你的下拉菜单的绝对 y 位置。绝对 x 位置将相对于用户在主导航中悬停的按钮的 x 位置，根据您希望下拉菜单相对于其父级菜单的位置进行偏移元素。
• 如果低于您的主导航，则计算相反。我会把这个送给你，因为玩一点不会有什么坏处:)

当我之前提到即使下拉菜单是 positionned: absolute 的，但实际上测量是真正相对于主导航的，这对你来说尤其如此，因为你的主导航和下拉菜单的定位都是动态的，这意味着静态位置在这种情况下不起作用。

我已经为您提供了代码背后的逻辑，如果您不明白我要解释的内容，请告诉我。

帕特