如何在Bootstrap中将单个下拉菜单附加到正文

Question

我已经看到下拉菜单的文档作为组件并单独使用javascript.

我想知道是否可以在网站的正文中添加一个下拉菜单(相对于可点击按钮元素的绝对位置).

为什么？

• 因为如果我有一个包含500行的表,我不想添加相同的10个项目列表500次,这使得处理JS时生成的HTML变得更大更慢.

• 因为父元素可以被隐藏,但我仍然希望下拉菜单可见,直到它们点击外面它没有聚焦它.

我找到了更多人要求这个功能,但我在文档中找不到任何关于它的内容.

Answer 1

正如引导程序文档所说,下拉菜单没有选项...这很难过,但这意味着目前没有针对所需功能的"引导程序"解决方案.但是,如果你正在使用Angular-UI/Bootstrap套件,现在有一个解决方案.您引用的故障单已关闭,因为它最终于 2015年7月15日添加到Angular-UI.

您所要做的就是'向下拉元素添加下拉 - 附加到主体,以附加到正文的内部下拉菜单.当下拉按钮位于带溢出的div中时,这很有用:隐藏,否则菜单将被隐藏.(参考)

<div class="btn-group" dropdown dropdown-append-to-body>
  <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle>Dropdown on Body <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 class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

希望这可以帮助!

编辑

为了回答另一个SO问题,我找到了一个解决方案,如果你没有使用Angular-UI,效果会非常好.它可能是"hacky",但它不会破坏引导菜单功能,并且它似乎与我用过它的大多数用例都很好.

所以我会留下一些小提琴,以防其他人看到这个并且感兴趣.第一个说明了为什么使用正文附加菜单可能会很好,第二个展示了工作解决方案:

问题FIDDLE

问题:面板主体内的选择下拉列表

<div class="panel panel-default">
  <div class="panel-body">
    <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>
  </div>
</div>

解决方案FIDDLE

(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();
    });
})();

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