隱藏在其他元素后面的 Bootstrap 下拉菜單

Question

我有一個類似的問題。 但是那里的解決方案不適用於我的問題。 該討論已結束以征求進一步的建議。 不幸的是，我無法完全按照在 jsfiddle 上顯示我的代碼。 但是問題是這樣的。 嘗試展開第一個面板部分內的下拉菜單時，下拉菜單隱藏在其他元素后面。 我花了幾個小時嘗試關於“堆疊上下文”、“位置”和“z-index”的不同建議。 如果有人能指出任何可以提供幫助的資源，我將不勝感激。

<div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span data-bind="label">Select One</span>&nbsp;<span class="caret"></span>

                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Item 1</a>
                        </li>
                        <li><a href="#">Another item</a>
                        </li>
                        <li><a href="#">This is a longer item that will not fit properly</a>
                        </li>
                    </ul>
                </div>

Answer 1

你有兩個選擇。 您可以通過將'overflow：auto'設置為父級的css來擴展容器的溢出以適應內容。

FIDDLE DEMO

.panel-body { /* parent container of the menu */
    overflow:auto;
}

或者您可以使用JavaScript在功能上執行某些操作來處理菜單放置。 這個選項有點'hacky'，需要進一步改進。 您需要改進它以在同一頁面上同時打開多個菜單，並且您需要改進它選擇菜單的方式。 您可能還希望添加滾動支持以使用其目標元素移動菜單，除非這不是問題。 這是小提琴：

FIDDLE DEMO

(function() {
  // hold onto the drop down menu                                             
  var dropdownMenu;

  // and when you show it, move it to the body                                     
  $(window).on('show.bs.dropdown', function(e) {

    // grab the menu        
    dropdownMenu = $(e.target).find('.dropdown-menu');

    // detach it and append it to the body
    $('body').append(dropdownMenu.detach());   

    // grab the new offset position
    var eOffset = $(e.target).offset();

    // make sure to place it where it would normally go (this could be improved)
    dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': eOffset.left
    });                                                
  });

  // and when you hide it, reattach the drop down, and hide it normally                                                   
  $(window).on('hide.bs.dropdown', function(e) {        
    $(e.target).append(dropdownMenu.detach());        
    dropdownMenu.hide();                              
  });                                                   
})(); 

可能有更好的方法，但概念是將菜單從父元素的范圍移動到正文。 當您依靠html數據屬性來設置菜單時，您將無法執行此操作，但這是我引用的第二個解決方案變得有用的地方。

遺憾的是，我建議查看bootstrap提供的“Via Javascript”選項，但顯然他們沒有設置目標append元素的選項。 很高興有一個選項可以將菜單附加到你想要的任何元素上，就像其他大多數項目一樣： Bootstrap Docs

---

編輯

正如@Andrea Pizzirani所提到的，你可以嘗試刪除菜單絕對定位的css，但我不推薦它！ 這會搞亂菜單的所有其他實例，除非您添加其他css來限制更改的范圍。 此外，如果您希望菜單位於按鈕下方，則必須重做已經存在的引導程序的CSS。

盡管如此，如果它有效，並且您不擔心搞亂所有其他菜單，它可能是您正在尋找的解決方案。 這是一個演示解決方案的小提琴：

FIDDLE DEMO

dropdown-menu {}

---

編輯我終於找到了我最初找到這個解決方案的地方。 在信用到期時必須給予信任！

Answer 2

嘗試刪除位置：絕對; 從：

dropdown-menu {}

並通過css將菜單放在按鈕下。

Answer 3

修改上面喬納森的回答，這是一個巨大的幫助，但我修改了它以將菜單放回它的源行，這允許自定義 jQuery 正常運行（因為菜單仍然存在於其初始父元素層次結構中。我的用例是帶有凍結列的 jQuery 數據表。我們在該表的單元格中嵌入了一個引導程序 4“操作”下拉菜單。菜單出現在隱藏列的后面。此功能允許將其復制並粘貼到用戶可以使用的固定列上方實際上與之交互。

function BringActionMenuToForeground() {
    var dropdownMenu;

    /// When you show the menu, remove it from its current row and place it right back. This puts it on top of the DOM.
    $(window).on('show.bs.dropdown', function (e) {
        /// grab the menu
        dropdownMenu = $(e.target).find('.dropdown-menu');
        /// get the row where the menu appers.
        var menuRow = $(dropdownMenu).closest("tr");
        /// detach it and append it right back to the row from which it was taken.
        $(menuRow).append(dropdownMenu.detach());

        /// grab the new offset position
        var eOffset = $(e.target).offset();

        /// make sure to place it where it would normally go (this could be improved)
        dropdownMenu.css({
            'display': 'block',
            'top': eOffset.top + $(e.target).outerHeight(),
            'left': eOffset.left
        });
    });

    /// and when you hide it, reattach the drop down, and hide it normally                                                   
    $(window).on('hide.bs.dropdown', function (e) {
        $(e.target).append(dropdownMenu.detach());
        dropdownMenu.hide();
    });
}

Answer 4

在您的 HTML 上添加一個額外的 class 並使用下面的代碼筆參考代碼。

check here: https://codepen.io/qpqinc/pen/yLyPVMJ

Answer 5

您只需要添加：

.panel.panel-default{
      overflow: inherit !important;
    }

JSFIDDLE DEMO