语义 UI 下拉菜单不适用于 Bootstrap 5 下拉菜单

Question

我正在尝试使用语义 UI 创建一个 select 下拉列表。我已经按照他们的例子 Docs: Semantic UI Dropdown Usage.

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

尝试这样初始化：

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

或者尝试在 CSS Class 中添加 simple 像这样

<div class="ui simple dropdown item">

@Cyzanfar 和@MayankChandak 在 (semantic-ui dropdown menu do not work) 中的归因

官方文档here

Answer 2

添加数据属性 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/core@2.9.2/dist/umd/popper.min.js" ></script>

语义 UI 下拉菜单不适用于 Bootstrap 5 下拉菜单

Semantic UI Dropdown Not Working With Bootstrap 5 Dropdown

jquery

semantic-ui

bootstrap-5