相對按鈕組

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> 

目標：

UPDATE 看起來像頁面上加載的下拉菜單（以下簡稱「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底部填充到這一點，然後用animate設置div高度，實質上重新創建由相對位置滾動菜單給出的效果。這適用於現在，但可能會導致一些問題。

假設有10排按鈕。如果頂行按鈕被按下並且只有一個小下拉菜單，div仍然會變得更高一些。爲了解決這個問題，你可以做更多的數學。