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而不是height，因为outerheight包括padding和border。 Difference between height and outerheight jquery

如果空间不足，如何从底部到顶部扩展div

1 个答案: