隐藏在其他元素后面的引导下拉菜单

Question

我有一个类似于this 的问题。但是那里的解决方案不适用于我的问题。该讨论已结束，以征求进一步的建议。 不幸的是，我无法完全按照 jsfiddle 上的方式显示我的代码。但是问题类似于this。尝试在第一个面板部分内展开下拉菜单时，下拉菜单隐藏在其他元素后面。 我花了几个小时尝试有关“堆叠上下文”、“位置”和“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 数据属性来设置菜单时，您会遇到麻烦，但这就是我引用的第二个解决方案有用的地方。

遗憾的是，我建议查看引导程序提供的“Via Javascript”选项，但显然他们没有设置目标附加元素的选项。如果可以选择将菜单附加到您想要的任何元素上，就像他们的大多数其他项目一样：Bootstrap Docs

---

编辑

正如@Andrea Pizzirani 提到的，您可以尝试删除菜单绝对定位的 css，但我不推荐它！除非您添加其他 css 以限制更改范围，否则这将弄乱菜单的所有其他实例。此外，如果您希望菜单位于按钮下方，则必须重做引导程序已经存在的 CSS。

不过，如果它有效，并且您不必担心会弄乱所有其他菜单，那么它可能就是您正在寻找的解决方案。这是一个演示解决方案的小提琴：

FIDDLE DEMO

dropdown-menu {}

---

编辑 我终于找到了我最初找到这个解决方案的地方。必须感谢credit is due!

Answer 2

尝试删除 position: absolute; from:

dropdown-menu {}

并通过css将菜单放在按钮下方。

Answer 3

修改上面乔纳森的答案，这是一个巨大的帮助，但我修改它以将菜单放回它的源行，这允许自定义 jQuery 正常运行（因为菜单仍然存在于其初始父元素层次结构中。我的用例是一个带有冻结列的 jQuery DataTable。我们在该表的一个单元格中嵌入了一个 bootstrap 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

您只需要添加：

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

JSFIDDLE DEMO