下拉菜單移動頁面溢出

Question

我有一張桌子。 此表列出了患者的詳細信息。 我想添加一個下拉菜單來做一些 function。 但是下拉菜單從右側和底部溢出。 我不想要這個。 我希望下拉菜單始終保留在屏幕內。

因此，如果菜單從右側溢出，則向左側打開。 如果菜單從底部溢出，則打開到頂部。

這是代碼，

https://jsfiddle.net/um1vr3wq/

我做了很多研究。 我找到了一些代碼。 但它對我來說不能正常工作。

此代碼將“反向右轉”class 添加到具有相同 class 的所有 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”時設置 position。 當我立即縮小或放大頁面時，我希望菜單 position 發生變化。

$(".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 的新手，需要一個明確的解決方案。 你能幫助我嗎？

（對不起我的英語不好。我正在努力。）

Answer 1

您必須對下拉框頂部和左側 position 進行一些計算，包括它的高度和寬度。 並切換類以反轉它的 position。

這是鏈接

> https://codepen.io/AsfanShaikh/pen/PooeazY