Question

Semantic UI 下拉菜单无法与 Bootstrap 5 下拉菜单配合使用

2021-04-14

901

jquery semantic-ui bootstrap-5

我正在尝试使用 Semantic UI 制作一个选择下拉列表。我按照他们的文档：Semantic UI 下拉列表用法中的示例进行操作。

但在 Bootstrap 5 中调用 $('.ui.dropdown').dropdown() 似乎无法正常工作，在我使用 Bootstrap 4 时它最初运行良好，但自从我升级到 Bootstrap 5 后，我开始收到此错误：

bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'classList' of undefined
    at o.r.show (bootstrap.min.js:6)
    at o.r.toggle (bootstrap.min.js:6)
    at HTMLSelectElement.<anonymous> (bootstrap.min.js:6)
    at HTMLSelectElement.n (bootstrap.min.js:6)

有人能帮忙吗，我一直在努力找出发生这种情况的原因。我尝试重新排列 JS 包含的顺序：

<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bs-init.js"></script>
<script src="/apis/map.api.google.js"></script>
<script src="/plugins/hammer.min.js"></script>
<script src="/plugins/semantic.min.js"></script>
<script src="/plugins/bmd.js"></script>
<script src="/app.ca.layout.js"></script>

Answer 1

添加数据属性 data-bs-toggle="dropdown"，如下所示。

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>

然后将其添加到您的 index.html

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" ></script>

Answer 2

尝试像这样初始化下拉菜单：

$('.ui.dropdown')
  .dropdown();

或者在 class 属性中添加 simple ，如下所示：

<div class="ui simple dropdown item">

查看所有 semantic-ui 下拉菜单不起作用。

有关更多信息，请参阅文档。