Bootstrap açılır liste konumu (Yukarı/Aşağı) belge yüksekliğine göre

Question

Sayfamda bootstrap dropmenu listesi var. Sayfa küçültüldüğünde veya ekran ayarlandığında, menüler ekrandan çıkar. Ekran yüksekliği ekrandan çıkıyorsa, bunları yukarı doğru görüntülemek ve görüntülemek istiyorum. Burada

Benim 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> 

Not: Liste genişlik, yükseklik ilgili değil patlayacak. Ekranın genişliği önemli değil çünkü zaten benim listenin ekran içinde görünmesini sağlayan "pull-right" kullanıyorum.

Answer 1

Açma menüsü tıklatma kontrolü tıklandığında yukarı doğru görüntülenmesini sağlamak için, menünün konteynır öğesinde .dropup sınıfını kullanmalısınız. Bu sınıfın ne zaman uygulanacağını belirlemek için, genişletilmiş açılır pencerenin alt kısmının pencerenin altında olup olmayacağını hesaplayabilir ve varsa .dropup sınıfını uygulayabilirsiniz. (Pencerenin scroll etkinliğine bağlanan) Bunun

Olası bir uygulama:

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

İşte göstermek için bir Bootply bu. Demo panelini kısaltmaya çalışın ve ardından açılan menünün, sahip olduğu kullanılabilir alana bağlı olarak açma/kapama kontrolünün üstünde/altında nasıl görüneceğini görmek için yukarı ve aşağı kaydırın.

Bu yardımcı olur umarız! Herhangi bir sorunuz olursa haberim olsun.

Answer 2

Ben herhangi bir açılır menü tıklandığında eğer sadece kodu çalıştırmak istediğiniz durumda @Serlite çözüme dayalı bir tıklama olayı oluşturduk:

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