隐藏在其他元素后面的 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