Pozycja listy rozwijanej Bootstrap (góra/dół) na podstawie wysokości dokumentu

Question

Mam listę rozwijaną bootstrap na mojej stronie. Gdy strona jest zminimalizowana lub ekran jest wyregulowany, menulist znika z ekranu. Chcę sprawdzić i wyświetlić je w górę, jeśli wysokość ekranu powoduje, że lista znika z ekranu.

tutaj jest mój 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> 

Uwaga: Lista dzieje się w odpowiedniej do wysokości, nie szerokości. Szerokość ekranu nie ma znaczenia, ponieważ już używam "pull-right", co powoduje, że moja lista wyświetla się na ekranie.

Answer 1

Aby zamiast tego wyświetlić menu rozwijane w górę po kliknięciu przełącznika, należy użyć klasy .dropup w elemencie kontenera menu. Aby określić, kiedy zastosować tę klasę, możesz obliczyć, czy dno rozwiniętego menu pojawi się poniżej okna, a jeśli tak, zastosuj klasę .dropup.

Jednym z możliwych rozwiązań tego (w załączeniu do okna scroll zdarzenia):

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); 

Oto Bootply wykazać. Spróbuj skrócić panel demonstracyjny, a następnie przewijaj panel w górę iw dół, aby zobaczyć, jak menu rozwijane pojawi się powyżej/poniżej przełącznika w zależności od dostępnego miejsca.

Mam nadzieję, że to pomoże! Daj mi znać, jeśli masz jakieś pytania.

Answer 2

Utworzyłem zdarzenie click w oparciu o rozwiązania @Serlite w przypadku chcesz tylko wykonanie kodu jeśli menu rozwijane kliknięciu:

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