Tengo una mesa. Esta tabla enumera los detalles de los pacientes. Quería añadir un menú desplegable para hacer algunafunción. Pero el menú desplegable se desborda desde la derecha y la parte inferior. No quiero esto. Quiero que el menú desplegable permanezca siempre dentro de la pantalla.

Así que si el menú está desbordado desde la derecha, abriéndose a la izquierda. Si el menú está desbordado desde la parte inferior, abriéndose a la parte superior.

Aquí están los códigos,

https://jsfiddle.net/um1vr3wq/

Hice muchas investigaciones. Encontré algunos códigos. Pero no funcionó bien para mí.

Este código agrega la clase "reverse-right" a todos los div que tengan la misma clase. No quiero esto. Sólo quiero que se añada al div en el que se ha clic.

$(window).resize(function() {
    windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
    if (windowWidth < 1730) {
        $('.dropdown-content').addClass('reverse-right');
    }
    else {
        $('.dropdown-content').removeClass('reverse-right');
    }
});

Este código funciona correctamente. Pero no es lo que quiero. Esto establece la posición solo cuando se hace clic en ".dropbtn". Quiero que la posición del menú cambie cuando reduzca o amplíe la página al instante.

$(".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");
    }
});

Soy nuevo en Javascript y necesito una solución definitiva. ¿Me puedes ayudar?

(Lo siento por mi mal inglés. Estoy trabajando en ello.)

2
David Türkiye 7 nov. 2019 a las 16:42

1 respuesta

La mejor respuesta

Usted tiene que hacer algunos cálculos de la parte superior del cuadro desplegable y la posición izquierda incluyendo su altura y anchura. Y alterna las clases para invertir su posición.

Aquí está el enlace

> https://codepen.io/AsfanShaikh/pen/PooeazY
1
Asfan Shaikh 7 nov. 2019 a las 14:43