jquery - bootstrap 下拉菜单重叠包装 div

Question

允许 Bootstrap 按钮下拉菜单与包含的 div 重叠的正确方法是什么？包含的 div 有 overflow-y:scroll。当前的问题是当显示包含下拉内容时，内容停留在可滚动的 div 中。

尝试使用下拉菜单的绝对定位，将 position css 更改为 fixed 确实允许重叠。这是正确的方法吗？

这是 jsfiddle 演示: http://jsfiddle.net/weaver_je/pA6cx/1/

位置为 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;
});

Answer 1

仅通过 CSS 实现此目的的一种方法:

Bootstrap :http://jsfiddle.net/pA6cx/2/

CSS :

body > div > div.dropdown.open {
position: absolute;
}

仅可用于第一个按钮，我没有编辑第二个...

评论后: Jsfiddle:http://jsfiddle.net/fw522/2/

body > div > div.dropdown.open:hover{
position: absolute;
}

仅在鼠标悬停时设置为绝对位置