如何确定下拉列表应显示向上或向下方向

Question

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

到目前为止，我遇到了下拉列表太长的问题，所以我热衷于将其显示为向上的方向。我知道Bootstrap具有相同的功能，但我想自己做。有什么建议或关键字？

谢谢

更新：

我不使用任何库。只需参考Bootstrap就达到了目的。这些图片只是的例子

Answer 1

这是一个Bootstrap组件：

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

默认行为是在底部打开。通过将.dropup元素设置为.dropdown-menu元素的父元素来确定顶部开口。在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/