css - 按钮组内的相对定位 Bootstrap 下拉列表

Question

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

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

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

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

我今天需要继续进行另一个元素，现在我没有太多时间可以投入到这个元素中，非常感谢任何提示让我走上正轨。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 仍然会变高一点。要解决这个问题，您可以做更多的数学运算。