web-dev-qa-db-ja.com

Bootstrapドキュメントの高さに基づくドロップダウンリストの位置（上/下）

私のページにbootstrapドロップメニューリストがあります。ページが最小化されるか、画面が調整されると、メニューリストが画面から消えます。画面の高さが画面から消えるリスト。

これが私のhtmlです。

 <div  class="btn-group pull-right">                    
 <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Click<span class="caret"></span></button>
                <ul  class="dropdown-menu pull-right" role="menu">
                    <li>First</li>
                    <li>Second></li>
                    <li>Third</li>
                    <li><Fourth</li>
                    <li>Fifth</li>
                </ul>
            </div>

注：リストは、幅ではなく高さに応じて表示されます。すでに「pull-right」を使用しているので、画面の幅は関係ありません。これにより、リストが画面内に表示されます。

jquerytwitter-bootstrapcssdrop-down-menutwitter-bootstrap-3
12
user472269

トグルコントロールがクリックされたときにドロップダウンメニューが代わりに上向きに表示されるようにするには、メニューのコンテナ要素で.dropupクラスを使用する必要があります。このクラスをいつ適用するかを決定するには、展開されたドロップダウンの下部がウィンドウの下に表示されるかどうかを計算し、適用される場合は、.dropupクラスを適用します。

これの1つの可能な実装（ウィンドウのscrollイベントに添付）：

function determineDropDirection(){
  $(".dropdown-menu").each( function(){

    // Invisibly expand the dropdown menu so its true height can be calculated
    $(this).css({
      visibility: "hidden",
      display: "block"
    });

    // Necessary to remove class each time so we don't unwantedly use dropup's offset top
    $(this).parent().removeClass("dropup");

    // Determine whether bottom of menu will be below window at current scroll position
    if ($(this).offset().top + $(this).outerHeight() > $(window).innerHeight() + $(window).scrollTop()){
      $(this).parent().addClass("dropup");
    }

    // Return dropdown menu to fully hidden state
    $(this).removeAttr("style");
  });
}

determineDropDirection();

$(window).scroll(determineDropDirection);

これが Bootply であることを示しています。デモパネルを短くしてから、パネルを上下にスクロールして、使用可能なスペースに応じて、ドロップダウンメニューがトグルコントロールの上/下にどのように表示されるかを確認します。

お役に立てれば！ご不明な点がございましたらお知らせください。

18
Serlite

ドロップダウンメニューがクリックされた場合にコードを実行したい場合に備えて、@ Serliteソリューションに基づいてクリックイベントを作成しました。

$(document.body).on('click', '[data-toggle=dropdown]', function(){
    var dropmenu = $(this).next('.dropdown-menu');

    dropmenu.css({
        visibility: "hidden",
        display: "block"
    });

    // Necessary to remove class each time so we don't unwantedly use dropup's offset top
    dropmenu.parent().removeClass("dropup");

    // Determine whether bottom of menu will be below window at current scroll position
    if (dropmenu.offset().top + dropmenu.outerHeight() > $(window).innerHeight() + $(window).scrollTop()){
        dropmenu.parent().addClass("dropup");
    }

    // Return dropdown menu to fully hidden state
    dropmenu.removeAttr("style");
});
6
CIRCLE