twitter-bootstrap bootstrap 下拉菜单重叠包装 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22379149/
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 menu overlap wrapping div
提问by user3415339
What is the proper way to allow a bootstrap button dropdown to overlap the containing div? The containing div has overflow-y:scroll. The current problem is when containing dropdown contents is displayed the contents stay within the scrollable div.
允许引导按钮下拉列表与包含的 div 重叠的正确方法是什么？包含的 div 有溢出-y:scroll。当前的问题是当显示包含下拉内容时，内容保留在可滚动 div 内。
Tried using absolute positioning of dropdown, changing position css to fixed does allow the overlap. Is that the proper way?
尝试使用下拉菜单的绝对定位，将位置 css 更改为固定确实允许重叠。这是正确的方法吗？
Here is jsfiddle demonstrating: http://jsfiddle.net/weaver_je/pA6cx/1/
这是 jsfiddle 演示：http: //jsfiddle.net/weaver_je/pA6cx/1/
The first button (.btn1) with position: fixed is closest to desired output.
第一个带有 position: fixed 的按钮 (.btn1) 最接近所需的输出。
<div style="width:120px; height:150px; overflow-y:scroll;">
<div class="dropdown">
<button class="btn dropdown-toggle btn1" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<br/><br/>
<div class="dropdown">
<button class="btn dropdown-toggle btn2" type="button" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</div>
$(".btn1").click(function (e) {
$(".dropdown-menu").css({
position:"fixed",
display: "block",
left: e.pageX,
top: e.pageY
});
return false;
});
$(".btn2").click(function (e) {
$(".dropdown-menu").css({
position:"absolute",
display: "block",
left: e.pageX,
top: e.pageY
});
return false;
});
回答by BENARD Patrick
One way to do this just by CSS:
仅通过 CSS 执行此操作的一种方法：
Bootply: http://jsfiddle.net/pA6cx/2/
引导：http: //jsfiddle.net/pA6cx/2/
CSS:
CSS:
body > div > div.dropdown.open {
position: absolute;
}
Just available for first button, I didn't edit the second...
仅可用于第一个按钮，我没有编辑第二个...
After comment: Jsfiddle : http://jsfiddle.net/fw522/2/
评论后：Jsfiddle：http: //jsfiddle.net/fw522/2/
body > div > div.dropdown.open:hover{
position: absolute;
}
Set to absolute position only when mouse is over
仅在鼠标悬停时设置为绝对位置
回答by Helder Pereira
I solved similar problem by moving the dropdown-togglebutton outside the dropdowndiv, adding the data-targetattribute to the button pointing to that div, and making the div's position absolute.
我通过将dropdown-toggle按钮移到dropdowndiv之外解决了类似的问题，将data-target属性添加到指向该 div 的按钮，并使 div 的位置成为绝对位置。
Here is jsfiddle: http://jsfiddle.net/pA6cx/58/
这是 jsfiddle：http: //jsfiddle.net/pA6cx/58/
HTML
HTML
<button class="btn dropdown-toggle btn1" type="button" data-target="#dropdown1" id="dropdownMenu1" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<div class="dropdown" id="dropdown1">
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
CSS
CSS
.dropdown {
position: absolute;
}
回答by NoOne
One solution is to use fixed positioning on the drop-down and set its position with JavaScript:
一种解决方案是在下拉菜单上使用固定定位并使用 JavaScript 设置其位置：
var dropdown = $element.find('.dropdown-menu');
var button = $element.find('.btn.dropdown-toggle');
function positionDropDown() {
dropdown.css('top', button.offset().top - $(window).scrollTop() + button.outerHeight() + "px");
dropdown.css('left', button.offset().left + "px");
}
button.click(positionDropDown);
dropdown.css('position', 'fixed');
One problem with this is when the user opens the drop-down and then scrolls the container. In that case, the dropdown will not follow the button.
一个问题是当用户打开下拉菜单然后滚动容器时。在这种情况下，下拉菜单将不会跟随按钮。
To fix that, I guess one would have to bind to the scrollevent of every container he finds up the DOM and update the dropdown position in the handler. An oversimplified example is this where we handle the window scroll only:
为了解决这个问题，我想必须绑定到scroll他找到 DOM 的每个容器的事件并更新处理程序中的下拉位置。一个过于简单的例子是我们只处理窗口滚动：
$(window).scroll(function(event) {
positionDropDown();
});
Imagine doing that for every parent container of the dropdown in the DOM and you have the hack to make HTML and CSS work as it should in the first place...
想象一下，为 DOM 中下拉列表的每个父容器执行此操作，并且您首先可以使 HTML 和 CSS 正常工作......
