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

编辑 我终于找到了我最初找到这个解决方案的地方.在信用到期时必须给予信任!