如何在Bootstrap中将单个下拉菜单附加到主体 [英] How to append a single dropdown menu to body in Bootstrap

问题描述

我看过下拉菜单作为组件和单独使用javascript 。

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

I'm wondering if it is possible to add a single dropdown menu in the website's body (absoluted positioned relative to the clickable button element).

为什么？

• 因为如果我有一个包含500行的表，我不想添加10个项目的相同列表500次，从而使结果HTML变大且

• Because if I have a table with 500 rows I do not want to add the same list of 10 items 500 times making the resulting HTML bigger and slower when dealing with JS.

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

Because the parent element can be hidden but I still want the dropdown menu to be visible until they click outside it unfocusing it.

我发现了更多人要求使用此功能，但我找不到

I found more people asking for this feature but I couldn't find anything in the docs about it.

推荐答案

作为 bootstrap文档说，下拉菜单没有选项……这很可悲，但这意味着当前没有想要的功能的 bootstrap解决方案。 但是，如果您使用的是Angular-UI / Bootstrap工具包中的解决方案，您引用的票证已关闭，因为它最终被添加为Angular-UI 2015年7月15日。

As the bootstrap documents say, there are no options for dropdown menus... This is sad, but it means there is currently not a 'bootstrap' solution for the functionality you want. There is now, however, a solution in the Angular-UI/Bootstrap kit if you're using that. The ticket you referenced is closed because it was finally added to the Angular-UI as of July 15th 2015.

所有您需要做的就是'将drop-append-to-body添加到dropdown元素中，以附加到body的内部dropdown-menu 。当下拉按钮位于具有溢出：隐藏的div内时，此功能很有用。否则菜单将被隐藏。' （参考）

All you have to do is 'Add dropdown-append-to-body to the dropdown element to append to the inner dropdown-menu to the body. This is useful when the dropdown button is inside a div with overflow: hidden, and the menu would otherwise be hidden.' (reference)

<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，但它不会破坏引导菜单功能，并且似乎可以与我使用过的大多数用例一起使用。

In an effort to answer another SO question, I found a solution that works pretty well if you weren't using Angular-UI. It may be 'hacky', but it doesn't break the bootstrap menu functionality, and it seems to play well with most use cases I've used it for.

因此，我将保留一些小技巧，以防其他任何人看到并感兴趣。第一个示例说明了为什么可以使用附加在主体上的菜单，第二个示例显示了可行的解决方案：

So I'll leave a few fiddles in case anyone else sees this and is interested. The first illustrates why the use of a body appended menu might be nice, the second shows the working solution:

问题

问题：面板主体中的选择下拉列表

The problem: a select dropdown within a panel body

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

---

编辑
我终于找到了最初找到此解决方案的位置。得在应付款的地方给予信用！

这篇关于如何在Bootstrap中将单个下拉菜单附加到主体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！