按钮组内的相对定位引导下拉菜单

Question

我有一系列按钮，每个按钮都有自己的按钮组类，带有一个下拉菜单：

我搜索了大量的堆栈溢出和谷歌链接。我尝试将 z-index 更改为更高的值，尝试更改 css 位置属性，甚至使用 onclick 方法调整容器 div 的大小，但效果不太好。

单击按钮时，我希望按钮所在的 div 调整大小。为此， div 和下拉列表必须是相对的（似乎是最简单的方法）。如您所见，div 调整了大小，但所有按钮组也是相对的，因此它们也四处移动。

我希望下拉菜单在其所属按钮的正下方打开，并在必要时与其他按钮重叠，同时不影响它们的位置。我从another user 复制了一个JS Fiddle，它展示了我的问题：当第一个按钮的下拉菜单打开时，第二个按钮被移动（该用户对另一个功能感兴趣）。

我今天需要继续进行另一个项目，而且我现在没有太多时间可以投入到这个工作中，感谢任何提示让我走上正轨。 JSFiddle 中使用的代码：

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="bold">Scrollable Menu</h2>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Scrollable Menu <span class="caret"></span></button>
                <ul class="dropdown-menu scroll-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                </ul>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Non Scrollable Menu <span class="caret"></span></button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

目标：

更新 看起来在页面加载下拉菜单（带有可滚动菜单类的“ul”元素）已经存储了它们的高度信息

在文档准备就绪时，我循环并使用此代码创建所有这些元素：

$("#buttonBody").append('<div class="btn-group">
 <button id='+state+' type="button" onclick=resize(this.id) style="border-radius:24px;" 
     class="btn btn-lg btn-primary dropdown-toggle" data-toggle="dropdown">'+state+'<span class="caret"></span></button> 
 <ul id="'+state+'dropdown" role="menu" class="dropdown-menu scrollable-menu" style="max-height:200px; height:auto; overflow-y:scroll;" aria-labelledby="'+state+'"></ul>
 </div>');

我循环并附加“li”元素以填充下拉列表。

Answer 1

为了让 div 元素更新它的大小，需要将可滚动菜单和 div 设置为 position: relative;。在我的例子中，按钮也有一个相对位置，因此它们的位置与 div 一起被扭曲了。

为了获得解决方法，我向按钮添加了 onclick 函数：

resize(dropdownId){
   var dropdownHeight = $(dropdownId).height();
   var totalHeight = originalDivHeightAfterPageLoad + dropdownHeight + 
      $(buttonId).height()+parseInt($(myDiv).css("padding-bottom");
   $(myDiv).animate({height:totalHeight},150);
}

它获取原始 div 高度的全局变量，并将当前下拉高度、buttonHeight 和 div 底部填充添加到该变量中，然后使用动画设置 div 高度，这实质上是重新创建了由相对位置滚动给出的效果菜单。这暂时有效，但可能会导致一些问题。

假设有 10 行按钮。如果按下顶行按钮并且只有一个小的下拉菜单，则 div 仍然会变得更高一些。要解决这个问题，您可以做更多的数学运算。