javascript - Bootstrap 多个下拉菜单问题

Question

我已经动态地制作了多个下拉菜单，但我的问题是，无论按下哪个按钮，都只会填充第一个下拉菜单。我可以在 Chrome 控制台中验证每个按钮下拉列表中的信息是否不同。我已经做了这个 Jsfiddle ( http://jsfiddle.net/aq9Laaew/34739/ ) 作为测试，但问题仍然出现。

<button class="btn btn-secondary dropdown-toggle" type="button" id="371390773" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="toggle">test 1 button</button>
<div class="dropdown-menu" aria-labelledby="371390773">test1</div>


<button class="btn btn-secondary dropdown-toggle" type="button" id="371116034" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="toggle">test 2 button</button>
<div class="dropdown-menu" aria-labelledby="371116034">test2</div>


<button class="btn btn-secondary dropdown-toggle" type="button" id="371078302" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">test3 button</button>
<div class="dropdown-menu" aria-labelledby="371078302">test3</div>

Answer 1

您忘记包裹 <button>和<div>里面<div class="dropdown"> 。它应该如下所示:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" ... >test 1 button</button>
    <div class="dropdown-menu" ... >test1</div>
</div>

参见Bootstrap docs 。这是jsfiddle我已经使用您原来的示例进行了更正。