Question

我使用Twitter Bootstrap作为下拉菜单。有一种情况是，如果打开下拉列表的元素位于页面底部，则菜单将在其下方打开，并滚动显示该页面。我想在这里使用碰撞检测，在这种情况下，菜单应在上方而不是下方打开。在bootstrap 2.3.2中有一个drop up选项，但如果我使用它，在所有情况下菜单将打开在顶部。有没有任何基于bootstrap的插件？或者我可以使用jQuery UI位置api以及bootstrap下拉列表。

代码：正常自举下拉列表

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"  data-delay="0" data-close-others="false">Account
</a>
<ul class="dropdown-menu">
    <li><a tabindex="-1" href="#">My Account</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Change Email</a></li>
    <li><a tabindex="-1" href="#">Change Password</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Logout</a></li>
</ul>

有关方案，请参阅：http://jsfiddle.net/gd9S2/

Answer 1

我使用jquery ui来定位引导下拉列表。对于上面显示的下拉列表：

    $('.dropdown').on('shown.bs.dropdown', function () {
        var menu = $(this).find('.dropdown-menu');

        if ((menu != null) && (menu.length == 1)) {
            var btn = menu.parent();

            menu.position({
                of: btn,
                my: "left top",
                at: "left bottom",
                collision: "flipfit"
            });
        }
    });

对于btn-group下拉列表：

    $('.btn-group').on('shown.bs.dropdown', function () {
        var menu = $(this).find('.dropdown-menu');

        if ((menu != null) && (menu.length == 1)) {
            var btn = menu.parent();

            menu.position({
                of: btn,
                my: "left top",
                at: "left bottom",
                collision: "flipfit"
            });
        }
    });

引导下拉列表中的碰撞检测

1 个答案: