Bootstrap Bundle JS 脚本破坏 Laravel 中的下拉菜单

Question

我对 Laravel 比较陌生，目前正在我的 Ubuntu 2024 系统上使用 Apache2。

我最近安装了 Laravel UI，它带有一个漂亮的导航栏。我做了一些修改，但我保留了个人资料旁边的下拉菜单不变。

后来，我尝试使用“bootstrap.Toast”来实现Bootstrap的Toast系统。但是，我遇到控制台错误，指出“bootstrap”未定义。为了解决这个问题，我包含了以下捆绑脚本：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

这使得Toast系统可以工作，但不幸的是，它导致下拉菜单停止工作。我什至尝试从头开始创建一个全新的下拉菜单，只要我不包含 Bootstrap 捆绑脚本，它就可以完美工作。

我的下拉菜单代码：

<div 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="#">Dropdown 1</a></li>
        <li><a class="dropdown-item" href="#">Dropdown 2</a></li>
    </ul>
</div>

Toast 显示代码：

var toastInstance = bootstrap.Toast.getOrCreateInstance(toastElement);
toastInstance .show();

为什么添加 Bootstrap 捆绑脚本会破坏下拉菜单？有没有办法在仍然使用 Toast 和下拉组件的情况下解决此问题？

Answer 1

听起来您的项目中的 Bootstrap JavaScript 文件之间可能存在冲突。您可以检查或尝试解决以下问题：

1。多个引导脚本

如果您包含多个版本的 Bootstrap JS 文件，可能会导致冲突。当您尝试加载 Bootstrap 5 时，Laravel UI 可能已包含 Bootstrap 4。确保您没有加载两个不同的版本。

检查您的资源/视图中是否有可能正在加载 Bootstrap 的任何标签。确保仅包含正确的版本（在您的情况下为 Bootstrap 5）。

2。使用 bootstrap.bundle.min.js

使用 bootstrap.bundle.min.js 时，它包含 Bootstrap 的 JavaScript 和 Popper.js，这是下拉菜单和工具提示所必需的。但是，您的 Laravel UI 可能会引入其他版本。

删除 Laravel UI 设置期间可能添加的任何其他 Bootstrap JS，并仅使用以下内容：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

3.检查 jQuery

Bootstrap 5 不依赖于 jQuery，但如果 Laravel UI 最初附带 Bootstrap 4，它可能会使用 jQuery。确保您不依赖于 jQuery 相关的下拉列表初始化。

确保使用 Bootstrap 5 的原生 JavaScript 组件。确保下拉初始化是使用 data-bs-toggle 完成的，而不是 data-toggle（适用于 Bootstrap 4）。

4。冲突的脚本

检查是否有其他 JavaScript 库或脚本可能会干扰 Bootstrap 的功能。

5。隔离测试下拉菜单

尝试暂时删除其他 JavaScript 代码并检查下拉菜单是否正常工作。然后重新添加Toast脚本并观察控制台中是否有任何冲突或错误。 最终修复（如果版本冲突）：

如果 Laravel UI 安装了 Bootstrap 4，您可能需要将所有内容升级到 Bootstrap 5 以保持一致性，包括更新您的 UI 元素和下拉菜单切换到 Bootstrap 5 语法。

如果问题仍然存在或者您需要更多指导，请告诉我！