Bootstrap Dropdown-Listenposition (Oben/Unten) basierend auf Dokumenthöhe

Question

Ich habe Bootstrap Dropmenü auf meiner Seite. Wenn die Seite minimiert oder der Bildschirm angepasst wird, verschwindet der Menulist vom Bildschirm. Ich möchte sie nach oben prüfen und anzeigen, wenn die Bildschirmhöhe durch die Bildschirmhöhe vom Bildschirm verschwindet.

hier ist mein 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> 

Hinweis: Liste wird in den jeweiligen höhen abgehend, nicht Breite. Die Breite des Bildschirms spielt keine Rolle, da ich bereits "pull-right" verwende, was meine Liste im Bildschirm anzeigt.

Answer 1

Damit ein Dropdown-Menü beim Klicken auf die Umschaltfläche stattdessen nach oben angezeigt wird, sollten Sie die .dropup-Klasse im Containerelement des Menüs verwenden. Um zu bestimmen, wann diese Klasse angewendet werden soll, können Sie berechnen, ob der untere Teil des erweiterten Dropdownbereichs unterhalb des Fensters liegt. Wenn dies der Fall ist, wenden Sie die Klasse .dropup an.

Eine mögliche Realisierung dieses (an die scroll Veranstaltung Fenster):

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

Hier ist ein Bootply zu demonstrieren. Versuchen Sie, das Demo-Panel kürzer zu machen, und scrollen Sie dann durch das Panel nach oben und unten, um zu sehen, wie das Dropdown-Menü je nach verfügbarem Platz über/unter dem Kippschalter erscheint.

Hoffe, das hilft! Lass es mich wissen, wenn du irgendwelche Fragen hast.

Answer 2

Ich habe ein Click-Ereignis erstellt basierend auf @Serlite Lösung im Fall, dass Sie nur den Code auszuführen, wenn ein Drop-Down-Menü angeklickt wird:

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