如何确定下拉菜单应显示向上还是向下方向

Question

我试图设计一个下拉组件。

到目前为止，我遇到的问题是下拉列表过长，因此我希望将其显示为向上方向。我知道Bootstrap具有相同的功能，但我想自己做。 有什么建议或关键字吗？

谢谢

更新：

我不使用任何图书馆。只需参考Bootstrap即可达到目的。 这些图片只是示例

Answer 1

这是一个Bootstrap组件：

https://getbootstrap.com/docs/4.0/components/dropdowns/

默认行为是在底部打开。通过将['1', ' 2', ' #'] and so on 元素设置为m, n, c元素的父元素来确定顶部的打开。在dropup variation下的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/