Javascript 如果菜单不适合jQuery屏幕，如何更改下拉列表的位置

我使用下拉菜单，还有我放在桌子上的这个下拉菜单

但如果没有足够的位置打开下拉列表，则不可见：

所以我想在上面打开这个菜单，如果底部没有足够的地方，我怎么做

我的密码-

打开下拉列表的代码：

$(document).ready(function () {

    Array.from(document.querySelectorAll('.custom-style')).forEach(function (menu_side) {
        menu_side.onclick = ({
            target
        }) => {
            if (!target.classList.contains('more')) return
            document.querySelectorAll('.dropout.active').forEach(
                (d) => d !== target.parentElement && d.classList.remove('active')
            )
            target.parentElement.classList.toggle('active');
        }

    });

});

---

我尝试使用一些方法，但它对我不起作用，现在我想我不知道如何解决这个问题。

我已经为您重写了javascript，请查看。在isInView函数中，您可以根据需要修改元素的底部位置。让我知道你的想法

$（文档）.ready（函数（）{
$（'.more'）。单击（函数（）{
让allMore=$（“.dropout”）；
设wh=$（window.innerHeight（）；
让parent=$（this.parent（）；
allMore.each（函数（）{
如果（！$（此）.is（父级））{
$（此）.removeClass（“活动”）；
}                
});
父类。切换类（“活动”）；
让parentBottom=parent.get（0）.getBoundingClientRect（）.bottom；
如果（！isInView（$（this）.closest（“td”）.get（0）））{
父母。托格类（“辍学”）；
}
});
功能isInView（el）{
var rect=el.getBoundingClientRect（）；
var elBottom=rect.bottom+$（el）.height（）+100；
可见变量=（elBottom纸张波纹{
边界半径：2px；
溢出：隐藏；
}
.btns{
宽度：60px；
}
.btns.grey{
背景色：#eee；
}
.btns.blue{
背景色：#4285f4；
颜色：#fff；
}
.btns.green{
背景色：#0f9d58；
颜色：#fff；
}
.btns.red{
背景色：#cb3a3a；
颜色：#fff；
}
.btns.浅蓝色{
背景颜色：浅蓝色；
颜色：#fff；
}
.btns.darkcyan{
背景色：深黄色；
颜色：#fff；
}
.btns{
过渡：框阴影0.2s三次贝塞尔（0.4,0,0.2,1）；
过渡延迟：0.2s；
盒影：0 2px 5px 0 rgba（0,0,0,0.26）；
}
.btns.已提升：活动{
盒影：0 8px 17px 0 rgba（0,0,0,0.2）；
转换延迟：0s；
}
.居中文本{
文本对齐：居中；
}

名字
姓氏
年龄




详细信息按钮


吉尔
史密斯
50




详细信息按钮


前夕
杰克逊
94




详细信息按钮



名字
姓氏
年龄




详细信息按钮


吉尔
史密斯
50




详细信息按钮


前夕
杰克逊
94




详细信息按钮

谢谢你的回答，但是这个解决方案将所有时间的active directory放在菜单的顶部，但是如果下拉菜单不在屏幕上，我只需要放在顶部。用上面的css创建一个名为“.dropoutY”的类，并将这段代码添加到你提供的javascript块中。代码=>“const windowHeight=$（window）.height（）-10、 const menuBottom=$（menu_-side）.get（0）.getBoundingClientRect（）.bottom；if（menuBottom>=windowHeight）{target.parentElement.classList.add（“dropoutY”）；}；我认为您可以根据需要修改它；请添加此方法，如答案：）未捕获引用错误：未定义menu-side