时间戳

首页 > 解决方案 > 语义 UI 下拉菜单不适用于 Bootstrap 5 下拉菜单

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

问题描述

我正在尝试使用语义 UI 制作一个选择下拉列表。我已经按照他们的文档中的示例进行操作： 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>

标签： jquerysemantic-uibootstrap-5

解决方案

添加数据属性 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>

推荐阅读