Question

我有一张桌子，下拉菜单在最后一行打开时被剪切。为了解决这个问题，我找到了一种从父分隔符中分离下拉菜单的方法，然后通过传递顶部和右侧值来定位下拉菜单。

我不知道如何获取它应该打开的位置的值，它应该位于触发下拉列表的按钮下方。

(function() {
  var dropdownMenu;
  console.log($(window).width());
  $(window).on('show.bs.dropdown', function(e) {     
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());          
    dropdownMenu.css('display', 'block');
    dropdownMenu.css('position', 'fixed');
    dropdownMenu.css('top', '440px');
    dropdownMenu.css('right', '100px')
  });                                                   
  $(window).on('hide.bs.dropdown', function(e) {        
    $(e.target).append(dropdownMenu.detach());        
    dropdownMenu.hide();                              
  });                                                   
})();

ps：其中值为440px，100px应该是相对于触发下拉列表的按钮的位置。

Answer 1

执行此操作的一种方法是使用getBoundingClientRect()。它将为您提供所单击元素的x和y（以及其他一些内容）。我在Chrome和Firefox中都进行了测试，它是cross browser compatible。

  $(window).on('show.bs.dropdown', function(e) {     
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());          
    dropdownMenu.css('display', 'block');
    dropdownMenu.css('position', 'fixed');
    var topValue = e.relatedTarget.getBoundingClientRect().y
    dropdownMenu.css('top', topValue);
    var leftValue = e.relatedTarget.getBoundingClientRect().x
    dropdownMenu.css('left', leftValue);
  });

Here is a fiddle.

得到顶级＆＃39;并且＆＃39;对＆＃39;基于点击

1 个答案: