javascript - 空间不够时如何让div自下而上展开

Question

我制作了一个类似下拉菜单的简化版本，您可以在此处查看 - 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>。 s(相同高度)。

但是我通过网络搜索并找不到有用的东西。

Answer 1

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

     $('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 而不是高度，因为 outerheight 包括填充和边框。 Difference between height and outerheight jquery