J'ai une table. Ce tableau répertorie les détails des patients. Je voulais ajouter un menu déroulant pour faire une fonction. Mais le menu déroulant déborde de la droite et du bas. Je ne veux pas ça. Je souhaite que le menu déroulant reste toujours à l'intérieur de l'écran.

Donc si le menu déborde de droite, s'ouvrant vers la gauche. Si le menu déborde du bas, s'ouvrir vers le haut.

Voici les codes,

https://jsfiddle.net/um1vr3wq/

J'ai fait beaucoup de recherches. J'ai trouvé des codes. Mais cela n'a pas fonctionné correctement pour moi.

Ce code ajoute la classe "reverse-right" à tous les div qui ont la même classe. Je ne veux pas ça. Je veux juste l'ajouter au div cliqué.

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

Ce code fonctionne correctement. Mais ce n'est pas ce que je veux. Cela définit la position uniquement lorsque ".dropbtn" est cliqué. Je souhaite que la position du menu change lorsque je réduis ou agrandis la page instantanément.

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

Je suis nouveau sur Javascript et j'ai besoin d'une solution définitive. Pouvez-vous m'aider?

(Désolé pour mon mauvais anglais. Je travaille dessus.)

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

1 réponse

Meilleure réponse

Vous devez faire quelques calculs de la position déroulante en haut et à gauche, y compris sa hauteur et sa largeur. Et basculez les classes pour inverser sa position.

Voici le lien

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