Bootstrap3在Dropdown和Dropup菜單之間切換

Question

我正在使用Bootsrtaps下拉菜單是我網站上的幾個地方。我到目前爲止唯一遇到的問題是，如果下拉菜單位於底部，則下拉菜單消失，並出現溢出-y。顯然這不是最好的，用戶不知道他們必須向下滾動。我在這裏與非技術人員打交道。

我環顧四周，看看有沒有辦法在頁面碰到頁面的某個部分時將下拉變成下拉菜單，但我找不到任何東西。無論如何用最少的代碼來做到這一點？

我只是用一個基本的引導菜單

<div class="dropdown"> 
    <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown"> 
    Dropdown 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
    <li role="presentation" class="divider"></li> 
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
    </ul> 
</div> 

什麼我談論的例子。 http://jsfiddle.net/9B8Sj/3/

Answer 1

$('.dropdown').on('shown.bs.dropdown', function() { 
    var c = $('.dropdown-menu').offset(); 
    if(($(window).height()-c.top) < 10) { 
     $('.dropdown').addClass('dropup'); 
    } 
}); 

我與你的jsfiddle例如測試這一點，它切換下拉到dropup。