Bootstrap下拉列表位置(Up/Bottom)基于文档高度

Question

我的页面上有bootstrap dropmenu列表.当页面最小化或屏幕调整时,menulist将离开屏幕.如果屏幕高度使列表离开屏幕,我想检查并向上显示它们.

这是我的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>

注意:列表分别以高度而不是宽度为准.屏幕的宽度无关紧要,因为我已经使用"向右拉",这使我的列表显示在屏幕内.

Answer 1

要使下拉菜单在单击其切换控件时向上显示,您应该使用.dropup菜单容器元素上的类.要确定何时应用此类,您可以计算扩展下拉列表的底部是否将在窗口下方结束,如果是,则应用.dropup该类.

一个可能的实现(附加到窗口的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来演示.尝试缩短演示面板,然后向上和向下滚动面板以查看下拉菜单如何显示在其切换控件的上方/下方,具体取决于其可用空间.

希望这可以帮助!如果您有任何疑问,请告诉我.

Answer 2

我基于@Serlite解决方案创建了一个click事件，以防您只想在单击任何下拉菜单时执行代码：

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