如何使用位于页面上其他位置的按钮切换引导下拉列表？

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>