Javascript 根据屏幕大小，代码的行为会有所不同

我在jQuery中遇到了奇怪的行为，因为我的笔记本电脑屏幕尺寸/分辨率比普通PC屏幕小一些

我想做的是根据最适合的位置放置下拉列表：如果事件目标太靠近窗口底部，则显示事件目标上方的下拉列表，反之亦然

如图所示，如果太靠近底部，则会在顶部显示下拉列表：

在这里，如果离顶部太近，则会在底部显示下拉列表：

---

你能给这个添加html吗？你在两把小提琴上有两个不同的标记，我不知道你到底是哪一个using@Huangism对不起，如果这是混淆；我使用两种不同的标记来演示这两种位置。我已经用HTML更新了这个问题。它在整个页面上吗？你确定你只有一个

.title

？我只有一个

。title

我建议你编辑这个问题，在这里放更多的html和一些相关的css

$(this).on("click", ".selector > *[data-action='open']", function(event) {
    const selector = $(this).parent(".selector");
    const container = selector.find(".container");
    const title = selector.find(".title");

    container.toggle();

    let windowHeight = $(window).height();
    let titleOffsetTop = title.offset().top;
    let titleHeight = title.height();
    let containerHeight = container.height();

    title.toggleClass("selected");

    if(windowHeight < (titleOffsetTop + titleHeight + containerHeight) && containerHeight < titleOffsetTop) {
        container.css("top", (-containerHeight-titleHeight));
    } else {
        container.css("top", 50);
    }
});

<div class="selector">
    <div class="title" data-action="open">Open</div>
    <div class="container">
        <ul class="itemList">
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
            <li>Hello</li>
        </ul>
    </div>
</div>