时间戳

首页 > 解决方案 > 根据点击获得“顶部”和“右侧”位置

javascript - 根据点击获得“顶部”和“右侧”位置

问题描述

我有一个带有下拉菜单的表格，当它在最后一行打开时被剪切。为了解决这个问题，我想出了一种方法来将下拉菜单与父分隔符分离，然后通过传递顶部和右侧的值来定位下拉菜单。

我不知道如何获取它应该打开的位置的值，它应该就在触发下拉菜单的按钮下方。

这是一个 JSFiddle 示例

(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 应该是相对于触发下拉的按钮的位置。

标签： javascriptjqueryhtmlcss

解决方案

一种方法是使用getBoundingClientRect(). 它将为您提供您单击的元素的 x 和 y（以及其他一些内容）。我在 Chrome 和 Firefox 中都进行了测试，它是 跨浏览器兼容的。

  $(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);
  });

这是一个小提琴。

推荐阅读