ページのどこか他の場所にあるボタンでブートストラップのドロップダウンを切り替えるには？

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> 

Iは、異なる場所にあるとドロップダウンボタントリガを希望。私はこのlinkがあなたのために合うだろうと思い

Answer 1

を支援するための

ありがとう！

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>