我有一个带有下拉菜单的表格,当它在最后一行打开时被剪切了。为了解决这个问题,我找到了一种方法,将下拉菜单与父分隔线分离,然后通过传递顶部和右侧的值来定位下拉菜单。
我不知道如何获取它应该打开的位置的值,它应该就在触发下拉菜单的按钮下方。
(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 应该是相对于触发下拉按钮的位置。
最佳答案
一种方法是使用 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);
});
关于javascript - 根据点击获取 'top' 和 'right' 位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50180442/