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

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

现在,我的实际实现(github page),代码完全相同(下图),但是它想要在打开时用.dropup替换所有.dropdown类,包括截止的最顶行,如下图所示.

我已经苦苦挣扎了一个星期而且无法弄明白.我尝试了一些不同的东西,我认为它已修复它但最终只是一个黑客,并没有在移动设备上工作,或者取代了一些但不是全部等等.

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

$(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",function() {
  // always reset after close
  $(this).removeClass("dropup");
});

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

解决方法

它花了一些基本的数学,但我设法弄清楚你想做什么.此代码根据可用于正常下拉列表的空间,在dropup和dropdown之间更改引导类.

我通过减去按钮的高度,dropdownmenu以及scrollContainer的高度在scrollContainer中向下滚动按钮的距离来计算出来.通过使用按钮偏移并减去scrollContainer的偏移量,我得到了div向下滚动的值.

这是我的jQuery(我选择.playlist类,因为它附加到你的scrollContainer,但你应该用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

如果代码的某些部分可以更容易地改进/完成,或者我的解决方案有任何问题,请告诉我.

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

解决方法

猜你在找的JavaScript相关文章