1

我正在使用 Twitter Bootstrap 作为下拉菜单。在某些情况下，如果打开下拉菜单的元素位于页面底部，则菜单会在其下方打开并滚动到页面。我想在这里使用碰撞检测，在这种情况下，菜单应该在上方而不是下方打开。在引导程序 2.3.2 中有一个下拉选项，但如果我使用它，在所有情况下菜单都会在顶部打开。是否有任何基于引导程序的插件？或者我可以使用 jQuery UI 位置 API 和引导下拉菜单。

代码：正常引导下拉菜单

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

4

1 回答 1

2

我使用 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"
            });
        }
    });
于 2014-01-07T16:41:26.413 回答