Question

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

我已经搜索了大量的堆栈溢出和谷歌链接。我尝试将z-index更改为更高的值，尝试更改css位置属性，甚至使用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>

目标：

更新在页面上加载下拉列表（具有可滚动菜单类的＆＃39; ul＆＃39;元素）已经存储了高度信息

on ready ready是我遍历并使用以下代码创建所有这些元素：

$("#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>');

我循环并追加＆＃39; li＆＃39;填充下拉列表的元素。

按钮组内的相对定位引导下拉列表

0 个答案: