如何使用位於頁面其他位置的按鈕切換引導下拉菜單？

Question

迄今爲止我見過的每一個例子，下拉是觸發按鈕的下方。如果我想在頁面中間彈出一個非常長的下拉菜單，該怎麼辦？

此代碼：

<div class="dropdown"> 
<button class="btn btn-default dropdown-toggle" type="button" 
    id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
    Dropdown 
    <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li role="separator" class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
</ul> 
</div> 

我想下拉和按鈕觸發是在不同的位置。

感謝您的幫助

Answer 1

我認爲這link會適合你！

Answer 2

，因爲它是引導文件中說，這似乎是強制性的，以有.dropdown標籤內的下拉觸發。

bootstrap documentation

如果你想減少html代碼，你唯一可以做的就是定義在外部腳本 您下拉觸發和菜單，並填寫您的.dropdown標籤之後，像這樣：

<div class="dropdown">  
</div> 

<script> 
    var dropdownButtonTrigger = '<button class="btn btn-default dropdown-toggle" type="button"' 
           +'id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' 
           +'Dropdown' 
           +'<span class="caret"></span>' 
           +'</button>'; 
    var dropdownList = '<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">' 
        + '<li><a href="#">Action</a></li>' 
        + '<li><a href="#">Another action</a></li>' 
        + '<li><a href="#">Something else here</a></li>' 
        + '<li role="separator" class="divider"></li>' 
        + '<li><a href="#">Separated link</a></li>' 
        + '</ul>';  

    $('.dropdown').append(dropdownButtonTrigger); 
    $('.dropdown').append(dropdownList); 
</script>