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

到目前为止，我看到的每个例子，下拉列表都在触发器按钮的下面。如果我想在页面中间弹出一个很长的下拉怎么办？

此代码：

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

下拉列表

我希望下拉菜单和按钮触发器位于不同的位置

---

谢谢你的帮助

我想这会适合你的

如引导文档中所述，在.dropdown标记中必须有下拉触发器

如果你想减少html代码，你唯一能做的就是定义 您的下拉触发器和外部脚本中的菜单，然后填充您的

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

var dropdownButtonTrigger=“”
+“下拉列表”
+''
+'';
var dropdownList='
'
+“
”
+“
”
+“
”
+“
”
+“
”
+“
”；
$（'.dropdown'）.append（dropdownButtonTrigger）；
$（'.dropdown'）.append（dropdownList）；