我有一张 table 。该表列出了患者的详细信息。我想添加一个下拉菜单来执行某些功能。但是下拉菜单从右侧和底部溢出。我不想要这个。我希望下拉菜单始终保留在屏幕内。
所以如果菜单从右边溢出，向左边打开。如果菜单从底部溢出，向上打开。
这是代码，
https://jsfiddle.net/um1vr3wq/
我做了很多研究。我找到了一些代码。但它对我来说效果不佳。
此代码将“reverse-right”类添加到所有具有相同类的 div。我不想要这个。我只想将它添加到点击的 div。
$(window).resize(function() {
windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
if (windowWidth < 1730) {
$('.dropdown-content').addClass('reverse-right');
}
else {
$('.dropdown-content').removeClass('reverse-right');
}
});
这段代码工作正常。但这不是我想要的。这仅在单击“.dropbtn”时设置位置。当我立即缩小或放大页面时，我希望菜单位置发生变化。
$(".dropbtn").click(function () {
if ($(window).innerWidth() < 1730) {
$(this).parents(".dropdown").children(".dropdown-content").addClass("reverse-right");
}
else {
$(this).parents(".dropdown").children(".dropdown-content").removeClass("reverse-right");
}
});
我是 Javascript 的新手，需要一个确定的解决方案。你能帮帮我吗？
(抱歉我的英语不好。我正在努力。)
最佳答案
您必须计算下拉框的顶部和左侧位置，包括它的高度和宽度。并切换类以反转其位置。
这是链接
> https://codepen.io/AsfanShaikh/pen/PooeazY
关于javascript - 下拉菜单移动页面溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58750048/