Posizione elenco a discesa Bootstrap (Su/Basso) in base all'altezza del documento

Question

Ho un elenco di dropstart di bootstrap sulla mia pagina. Quando la pagina è ridotta a icona o lo schermo è regolato, il menulista sta uscendo dallo schermo. Voglio controllarli e visualizzarli verso l'alto se l'altezza dello schermo sta facendo uscire la lista dallo schermo.

ecco il mio html,

<div class="btn-group pull-right">      
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Click<span class="caret"></span></button> 
       <ul class="dropdown-menu pull-right" role="menu"> 
        <li>First</li> 
        <li>Second></li> 
        <li>Third</li> 
        <li><Fourth</li> 
        <li>Fifth</li> 
       </ul> 
      </div> 

Nota: Lista sta andando via in rispettivamente a altezza, non larghezza. La larghezza dello schermo non ha importanza perché sto già usando "pull-right" che rende la mia lista visualizzata all'interno dello schermo.

Answer 1

Per fare in modo che un menu a discesa venga visualizzato verso l'alto quando si fa clic sul controllo di attivazione, è necessario utilizzare la classe nell'elemento contenitore del menu. Per determinare quando applicare questa classe, puoi calcolare se la parte inferiore del menu a discesa espanso finirà sotto la finestra, e se lo fa, applica la classe .dropup.

Una possibile attuazione del presente (allegato alla manifestazione della finestra scroll):

function determineDropDirection(){ 
    $(".dropdown-menu").each(function(){ 

    // Invisibly expand the dropdown menu so its true height can be calculated 
    $(this).css({ 
     visibility: "hidden", 
     display: "block" 
    }); 

    // Necessary to remove class each time so we don't unwantedly use dropup's offset top 
    $(this).parent().removeClass("dropup"); 

    // Determine whether bottom of menu will be below window at current scroll position 
    if ($(this).offset().top + $(this).outerHeight() > $(window).innerHeight() + $(window).scrollTop()){ 
     $(this).parent().addClass("dropup"); 
    } 

    // Return dropdown menu to fully hidden state 
    $(this).removeAttr("style"); 
    }); 
} 

determineDropDirection(); 

$(window).scroll(determineDropDirection); 

Ecco un Bootply a manifestare. Prova a ridurre il pannello dimostrativo, quindi scorri il pannello verso l'alto e il basso per vedere come apparirà il menu a discesa sopra/sotto il relativo controllo a seconda dello spazio disponibile.

Spero che questo aiuti! Fatemi sapere se avete domande.

Answer 2

ho creato un evento click sulla base di soluzione @Serlite nel caso in cui si desidera solo per eseguire il codice, se si fa clic su qualsiasi menu a discesa:

$(document.body).on('click', '[data-toggle=dropdown]', function(){ 
    var dropmenu = $(this).next('.dropdown-menu'); 

    dropmenu.css({ 
     visibility: "hidden", 
     display: "block" 
    }); 

    // Necessary to remove class each time so we don't unwantedly use dropup's offset top 
    dropmenu.parent().removeClass("dropup"); 

    // Determine whether bottom of menu will be below window at current scroll position 
    if (dropmenu.offset().top + dropmenu.outerHeight() > $(window).innerHeight() + $(window).scrollTop()){ 
     dropmenu.parent().addClass("dropup"); 
    } 

    // Return dropdown menu to fully hidden state 
    dropmenu.removeAttr("style"); 
});