twitter-bootstrap 基于文档高度的 Bootstrap 下拉列表位置（上/下）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32746598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap dropdown list position (Up/Bottom) based on document height
提问by user472269
I have bootstrap dropmenu list on my page. When page is minimized or screen is adjusted, the menulist is going off the screen. I want to check and display them in upwards if screen height is making the list going off the screen.
我的页面上有引导下拉菜单列表。当页面最小化或屏幕调整时，菜单列表将离开屏幕。如果屏幕高度使列表脱离屏幕，我想检查并向上显示它们。
here is my html,
这是我的 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>
Note: List is going off in respective to height, not width. Width of the screen doesn't matter because i am already using "pull-right" which makes my list display inside the screen.
注意：列表在高度上会消失，而不是宽度。屏幕的宽度无关紧要，因为我已经在使用“右拉”，这使我的列表显示在屏幕内。
回答by Serlite
To cause a dropdown menu to instead display upwards when its toggle control is clicked, you should use the .dropupclass on the menu's container element. To determine when to apply this class, you can calculate whether the bottom of the expanded dropdown will end up below the window, and if it does, apply the .dropupclass.
要在单击切换控件时使下拉菜单向上显示，您应该.dropup在菜单的容器元素上使用该类。要确定何时应用此类，您可以计算展开下拉列表的底部是否会在窗口下方结束，如果是，则应用.dropup该类。
One possible implementation of this (attached to the window's scrollevent):
一种可能的实现（附加到窗口的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);
Here's a Bootplyto demonstrate. Try making the demo panel shorter, and then scroll the panel up and down to see how the dropdown menu will appear above/below its toggle control depending on the available space it has.
这里有一个Bootply来演示。尝试缩短演示面板，然后上下滚动面板以查看下拉菜单如何根据其可用空间显示在其切换控件的上方/下方。
Hope this helps! Let me know if you have any questions.
希望这可以帮助！如果您有任何问题，请告诉我。
回答by CIRCLE
I've created a click event based on @Serlite solution in case you just want to execute the code if any dropdown menu is clicked:
我已经创建了一个基于@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");
});
