如何确定下拉菜单应向上还是向下显示
2019-02-21
4596
我尝试设计一个下拉组件。
到目前为止，我遇到的一个问题是下拉列表太长，所以我希望将其显示为向上方向。我知道 Bootstrap 具有相同的功能，但我想自己做。 有什么建议或关键字吗？
谢谢
更新：
我没有使用任何库。只是参考 Bootstrap 已经实现了目的。
这些图片只是示例
2个回答
Bootstrap 所做的就是检查下拉菜单的高度是否小于屏幕的其余部分。下面是我所做的。
let style = 'bottom';
let element = document.getElementById('myId');
if (window.innerHeight - element.getBoundingClientRect().bottom < element.scrollHeight){
style = 'top'
}
Kingsley Uchenna
2021-10-11
这是 Bootstrap 组件：
https://getbootstrap.com/docs/4.0/components/dropdowns/
默认行为是在底部打开。通过将
.dropup
元素设置为
.dropdown-menu
元素的父元素来确定在顶部打开。 Bootstrap 文档中的
下拉菜单变体
对此进行了描述。
Bootstrap 依赖 js 和 popper.js 来实现下拉菜单的行为方面。
如果您不想使用 Bootstrap，可以使用其指南作为参考，或者依赖网上数百万个免费教程/示例之一。这里有几个例子。
仅 CSS 解决方案：
https://css-tricks.com/solved-with-css-dropdown-menus/
JS：
https://codepen.io/pedronauck/pen/fcaDw
http://cssmenumaker.com/blog/javascript-drop-down-menu-examples/
henser
2019-02-21