javascript - 没有足够的空间时如何从底部扩展到顶部

我已经制作了一个类似下拉菜单的简化版本，您可以在此处看到它的简化版本-FIDDLE。如您所见，我有几个菜单：

<div id="container">
<div class="wrapper-main">
  <input class="selected"/>

  <div class="dropdown-wrapper ae-hide">
    <div class="selectable">1</div>
    <div class="selectable">2</div>
    <div class="selectable">3</div>
  </div>
</div>
...
</div>

而且实际上它们可以动态添加到DOM中，因此计数不是固定的。当高度太大时，将显示滚动条。

我想要的是，当我展开菜单时，菜单的高度大于底部的空间，然后从底部开始向上渲染菜单。我认为让事情变得更加困难的另一件事是，并非所有菜单都具有相同数量的<div>（相同高度）。

但是我在网上搜索，找不到有用的东西。

最佳答案

在这里，您需要检查底部可用高度是否足以设置下拉包装器的高度。如下更新点击事件。

     $('body').on('click', '.selected', function (event) {
        $(this).next('.dropdown-wrapper').toggleClass('ae-hide');
        var bottomSpace = $(this).offset().top + $(this).outerHeight();
        var dropdown = $(this).next('.dropdown-wrapper');
        if ((bottomSpace + $(dropdown).outerHeight()) > $("#container").height()) {
            $(dropdown).css('top', $(dropdown).height() * (-1));
        }
    });

jsFiddle

注意：我有用户Outerheight而不是height，因为outerheight包括填充和边框。 Difference between height and outerheight jquery