Vị trí danh sách thả xuống Bootstrap (Lên/Dưới) dựa trên chiều cao tài liệu

Question

Tôi có danh sách dropmenu bootstrap trên trang của mình. Khi trang được thu nhỏ hoặc màn hình được điều chỉnh, người chuyên nghiệp sẽ rời khỏi màn hình. Tôi muốn kiểm tra và hiển thị chúng lên trên nếu chiều cao màn hình đang làm cho danh sách tắt màn hình.

đây là html của tôi,

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

Lưu ý: Danh sách đang xảy ra trong tương ứng với chiều cao, chiều rộng không. Chiều rộng của màn hình không quan trọng bởi vì tôi đã sử dụng "kéo-phải" mà làm cho danh sách của tôi hiển thị bên trong màn hình.

Answer 1

Để khiến menu thả xuống thay vào đó hiển thị trở lên khi điều khiển bật/tắt được nhấp, bạn nên sử dụng lớp .dropup trên phần tử vùng chứa của trình đơn. Để xác định thời điểm áp dụng lớp này, bạn có thể tính toán liệu dưới cùng của trình đơn thả xuống được mở rộng có kết thúc bên dưới cửa sổ hay không và nếu có, hãy áp dụng lớp .dropup.

Một thực thể này (gắn liền với sự kiện scroll của cửa sổ):

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

Dưới đây là một Bootply để chứng minh. Hãy thử làm cho bảng điều khiển demo ngắn hơn, và sau đó cuộn bảng điều khiển lên và xuống để xem cách trình đơn thả xuống sẽ xuất hiện trên/dưới điều khiển chuyển đổi của nó tùy thuộc vào không gian có sẵn của nó.

Hy vọng điều này sẽ hữu ích! Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi.

Answer 2

tôi đã tạo ra một sự kiện nhấp chuột dựa trên giải pháp @Serlite trong trường hợp bạn chỉ muốn thực thi mã nếu bất kỳ trình đơn thả xuống được nhấp:

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