0

我有一个在引导程序 4 中工作的下拉菜单，但现在在引导程序 5（测试版）中它不再工作。我想要做的是从辅助按钮打开一个特定的下拉菜单，但由于他们在引导程序 5 中所做的更改，这不再有效。有一个小提琴要演示。当您单击主按钮时它工作正常但是当您单击第二个按钮时它有一个错误，这种从任何地方调用下拉显示方法的方法在引导程序 4 中完美运行。我怎样才能让它在引导程序 5 中工作，那里在文档中提到了“参考”选项，但文档中的所有示例仅适用于数据属性，不适用于 JS。我尝试了很多东西，但没有任何效果。谢谢。

https://jsfiddle.net/6hbcp9xm/

HTML：

  <div class="col">
    <div id="test" class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
  <div class="col">
    <button id="testbtn">
      test
    </button>
  </div>
</div>

JS：

$("#testbtn").on("click", function(){
    $("#test").dropdown("show");
})
4

1 回答 1

0

您尝试显示的 id 包裹在第一个下拉按钮周围。这使它尝试显示按钮，该按钮已显示，因此脚本运行出错。

toggleClass与下拉列表的类结合使用.dropdown-menu。

$("#testbtn").on("click", function(){
    $('.dropdown-menu').toggleClass('show')
})

https://jsfiddle.net/nzx1c04y

于 2020-12-16T13:21:51.267 回答