使用Dropup替换Bootstrap Dropdown(两个几乎相同的实现上的不同活动)

Question

我正在github页面上进行一个项目.dropdown,.dropup如果div overflow-y: scroll会导致下拉菜单被截止/溢出,我会替换一个bootstrap .您可以在此jsfiddle中看到该功能正常工作.请注意,如果单击顶行右侧的省略号图标,它将下拉,如果单击底行上的图标,它将会下拉.

现在,我的实际实现(github页面),代码完全相同(下图),但是它想要在打开时替换所有.dropdown类.dropup,包括截断的最顶行,如下图所示. 我已经苦苦挣扎了一个星期而且无法弄明白.我尝试了一些不同的东西,我认为它已修复它但最终只是一个黑客,并没有在移动设备上工作,或者取代了一些但不是全部等等.

这是我正在使用的Javascript/jQuery,可以在jsfiddle和我的github源码中看到.

$(document).on("shown.bs.dropdown", ".dropdown", function () {
  // calculate the required sizes, spaces
  var $ul = $(this).children(".dropdown-menu");
  var $button = $(this).children(".song-menu");
  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()) - $('#playlist').scrollTop();
  // how much space is left at the bottom
  var spaceDown = $('#playlist').scrollTop() + $('#playlist').height() - ((ulOffset.top + 10) + $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");
});

编辑: 为了清除任何混淆,这里是没有添加.dropup功能的行为示例. jsfiddle注意当您单击最后一个菜单项时,它会打开菜单但需要滚动.我特别想要删除.dropdown类并添加.dropup这种情况,因此不需要滚动.

Answer 1

这需要一些基本的数学知识，但我设法弄清楚你想做什么。此代码根据正常下拉菜单的可用空间更改下拉菜单和下拉菜单之间的引导程序类。

我通过从scrollContainer 的高度减去按钮、下拉菜单的高度以及按钮在scrollContainer 中向下滚动的距离来计算此值。我通过使用按钮偏移量并减去滚动容器的偏移量来获取 div 向下滚动的量。

这是我的 jQuery（我选择了 .playlist 类，因为它已附加到您的滚动容器，但您应该用 id 替换它或通过其他方式选择它）：

$(".dropdown, .dropup").click(function(){
 var dropdownClassCheck = $(this).hasClass('dropdown');
 var buttonOffset = $(this).offset().top;
 var scrollboxOffset = $('.playlist').offset().top;
 var buttonHeight = $(this).height();
 var scrollBoxHeight = $('.playlist').height();
 var dropDownButtonHeight = $(this).children('ul').height();
 dropdownSpaceCheck = scrollBoxHeight>buttonOffset-scrollboxOffset+buttonHeight+dropDownButtonHeight; 
 if(dropdownClassCheck && !dropdownSpaceCheck){
  $(this).removeClass('dropdown').addClass('dropup');
 }
 else if(!dropdownClassCheck && dropdownSpaceCheck){
        $(this).removeClass('dropup').addClass('dropdown');
 }
});

一个工作中的JSFiddle

让我知道代码的某些部分是否可以改进/更容易完成，或者我的解决方案是否有任何问题。