Question

允许引导按钮下拉列表与包含div重叠的正确方法是什么？包含div有overflow-y：scroll。当前问题是当显示包含下拉内容时，内容保留在可滚动div中。

尝试使用下拉列表的绝对定位，将位置css更改为固定确实允许重叠。这是正确的方法吗？

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

位置：固定的第一个按钮（.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实现此目的的一种方法：

Bootply ：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;
}

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

Answer 2

我通过移动dropdown-toggle div之外的dropdown按钮解决了类似的问题，将data-target属性添加到指向该div的按钮，并设置了div的位置绝对的。

这是jsfiddle：http://jsfiddle.net/pA6cx/58/

<强> 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

.dropdown {
  position: absolute;
}

Answer 3

一种解决方案是在下拉列表中使用固定定位并使用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');

此问题的一个问题是当用户打开下拉列表然后滚动容器时。在这种情况下，下拉列表不会跟随按钮。

要解决这个问题，我想必须绑定到他找到DOM的每个容器的scroll事件并更新处理程序中的下拉列表位置。一个过于简单的例子就是我们只处理窗口滚动：

$(window).scroll(function(event) {
    positionDropDown();
});

想象一下，为DOM中的下拉列表的每个父容器执行此操作，并且您可以首先使HTML和CSS正常工作...

bootstrap下拉菜单重叠包装div

3 个答案: