bootstrap下拉菜单根据屏幕位置自动下拉？

Question

我想知道你们中是否有人有我要求准备的东西,以免我摆脱困境.我正在寻找的是一个下拉菜单,根据它在屏幕上的位置自动添加dropup类 - 当用户滚动或调整窗口大小时也会自动更改.

我正在寻找的内容已经在bootstrap-select插件中实现,但插件太"重"而无法使用.

Answer 1

有点晚了,但因为与其他人完全不同,这是我的bootstrap 3解决方案.它全局适用于页面上的所有下拉列表,也包括动态创建或加载的下拉列表.

请注意,我必须使用该shown.bs.dropdown事件,因为尺寸仅在此时准备就绪.

$(document).on("shown.bs.dropdown", ".dropdown", function () {
    // calculate the required sizes, spaces
    var $ul = $(this).children(".dropdown-menu");
    var $button = $(this).children(".dropdown-toggle");
    var ulOffset = $ul.offset();
    // how much space would be left on the top if the dropdown opened that direction
    var spaceUp = (ulOffset.top - $button.height() - $ul.height()) - $(window).scrollTop();
    // how much space is left at the bottom
    var spaceDown = $(window).scrollTop() + $(window).height() - (ulOffset.top + $ul.height());
    // switch to dropup only if there is no space at the bottom AND there is space at the top, or there isn't either but it would be still better fit
    if (spaceDown < 0 && (spaceUp >= 0 || spaceUp > spaceDown))
      $(this).addClass("dropup");
}).on("hidden.bs.dropdown", ".dropdown", function() {
    // always reset after close
    $(this).removeClass("dropup");
});

如果需要,可以通过@ PeterWone的应用程序高度魔法轻松改进它,目前这对我来说运作良好.

UPDATE

这是一个代表这个解决方案的小提琴:http://jsfiddle.net/3s2efe9u/

Answer 2

我在大页面上提供的答案存在性能问题.

我通过使用getBoundingClientRect()并向.btn-group包含dropdows的特定类添加新类来"改进"它,例如.btn-group-dropup.

你的旅费可能会改变.

(function() {
  // require menu height + margin, otherwise convert to drop-up
  var dropUpMarginBottom = 100;

  function dropUp() {
    var windowHeight = $(window).height();
    $(".btn-group-dropup").each(function() {
      var dropDownMenuHeight, 
          rect = this.getBoundingClientRect();
      // only toggle menu's that are visible on the current page
      if (rect.top > windowHeight) {
        return;
      }
      // if you know height of menu - set on parent, eg. `data-menu="100"`
      dropDownMenuHeight = $(this).data('menu');
      if (dropDownMenuHeight == null) {
        dropDownMenuHeight = $(this).children('.dropdown-menu').height();
      }
      $(this).toggleClass("dropup", ((windowHeight - rect.bottom) < (dropDownMenuHeight + dropUpMarginBottom)) && (rect.top > dropDownMenuHeight));
    });
  };

  // bind to load & scroll - but debounce scroll with `underscorejs`
  $(window).bind({
    "resize scroll touchstart touchmove mousewheel": _.debounce(dropUp, 100),
    "load": dropUp
  });

}).call(this);

Answer 3

编辑201年1月7日:整理变量名称并稍微优化代码.

dropup = function() {
  $(".dropdown-toggle").each(function(){ 
    offsetTop=$(this).offset().top+$(this).height()-$(window).scrollTop();           
    offsetBottom=$(window).height()-$(this).height()-$(this).offset().top+$(window).scrollTop();
    ulHeight=$(this).parents('.btn-group').find('ul').height();

    if ((offsetBottom < ulHeight) && (offsetTop > ulHeight)) {
      parent.addClass('dropup');
    } else {
      parent.removeClass('dropup');
    }
  });
} 

$(window).on('load resize scroll', dropup);