Question

我正在使用Bootsrtaps Dropdown菜单是我网站上的几个地方。到目前为止我遇到的唯一问题是如果下拉位于底部，则下拉消失在页面下方并出现溢出y。显然这不是最好的，用户不知道他们必须向下滚动。我在这里和非技术人员打交道。

我环顾四周，看看是否有办法在页面点击页面的某个部分时将下拉变为下拉，但我找不到任何内容。无论如何，用最少的代码做到这一点？

我只是使用基本的引导程序菜单

<div class="dropdown">
  <button class="btn dropdown-toggle sr-only" 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>

我正在谈论的一个例子。 http://jsfiddle.net/9B8Sj/3/

Answer 1

$('.dropdown').on('shown.bs.dropdown', function() {
    var c = $('.dropdown-menu').offset();
    if(($(window).height()-c.top) < 10) {
        $('.dropdown').addClass('dropup');
    }
});

我用你的jsfiddle示例对此进行了测试，并将下拉列表切换为dropup。

Bootstrap3在Dropdown和Dropup菜单之间切换

1 个答案: