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 に答える