基于文档高度的引导下拉列表位置（上/下）

Posted 2023-03-06

【中文标题】基于文档高度的引导下拉列表位置（上/下）

【英文标题】：Bootstrap dropdown list position (Up/Bottom) based on document height

【发布时间】：2015-12-21 04:27:38

【问题描述】：

我的页面上有引导下拉菜单列表。当页面最小化或屏幕调整时，菜单列表将离开屏幕。如果屏幕高度使列表脱离屏幕，我想检查并向上显示它们。

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

注意：列表是根据高度而不是宽度来计算的。屏幕宽度无关紧要，因为我已经在使用“向右拉”，这使我的列表显示在屏幕内。

【参考方案1】：

我已经创建了一个基于@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");
);

【参考方案2】：

要使下拉菜单在单击其切换控件时向上显示，您应该在菜单的容器元素上使用.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 来演示。尝试缩短演示面板，然后上下滚动面板，查看下拉菜单将如何根据可用空间显示在其切换控件上方/下方。

希望这会有所帮助！如果您有任何问题，请告诉我。

【讨论】：

很好，按预期工作。我还添加了 $(window).resize(determineDropDirection);这样在调整窗口大小时它的行为也会相同。

很高兴为您提供帮助，很高兴您能够根据自己的目的调整它。

谢谢！确实解决了一个非常普遍的问题！

我可以知道为什么我们将 css(Line 5 - Line 8) 放在这个函数中，而不是放在 css 文件中吗？

@Meilan 我们只是暂时应用样式，以便确定下拉菜单的尺寸；我们不希望它们总是被应用（就像它们是在样式表中定义的一样）。经过我们的计算，内联样式再次被removeAttr("style")移除。