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

Question

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

我想知道是否可以在网站主体中添加一个下拉菜单（相对于可点击按钮元素的绝对定位）。

为什么？

• 因为如果我有一个包含 500 行的表，我不想将包含 10 个项目的相同列表添加 500 次，从而在处理 JS 时导致生成的 HTML 更大更慢。

• 因为可以隐藏父元素，但我仍然希望下拉菜单可见，直到他们在其外部单击取消聚焦。

我发现更多人 要求此功能，但我在文档中找不到任何相关信息。

原文由 Alvaro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 引导文档 所说，下拉菜单没有选项……这很可悲，但这意味着目前没有针对您想要的功能的“引导”解决方案。 但是，如果您正在使用 Angular-UI/Bootstrap 工具包，现在有一个解决方案。您引用的票证已关闭，因为它最终于 2015 年 7 月 15 日 添加到 Angular-UI 。

您所要做的就是“将 dropdown-append-to-body 添加到下拉元素以将内部下拉菜单附加到主体。当下拉按钮位于带有 overflow: hidden 的 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”，但它不会破坏引导菜单功能，而且它似乎适用于我用过的大多数用例。

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

问题小提琴

问题：面板主体中的选择下拉菜单

<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>

解决方案

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

---

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

原文由 Jonathan 发布，翻译遵循 CC BY-SA 3.0 许可协议