Bootstrap 5.2 下拉菜单在 Laravel 中不起作用

Question

我已经从 Bootstrap 网站安装了预配置的导航栏之一。是Bootstrap 5.2的最新版本；但是，下拉菜单不起作用。我没有碰代码；它只是默认安装的 laravel 的默认导航栏。为什么下拉菜单没有切换？

<li class="nav-item dropdown">
    <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
       aria-haspopup="true" aria-expanded="false" v-pre>
        {{ Auth::user()->name }}
    </a>
    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="{{ url('dashboard') }}">Dashboard</a>
        <a class="dropdown-item" href="{{ route('logout') }}"
           onclick="event.preventDefault(); 
           document.getElementById('logout-form').submit();">
            {{ __('Logout') }}
        </a>
        <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
            @csrf
        </form>
    </div>
</li>

我尝试在互联网上研究解决方案。

Answer 1

确保您已包含 Bootstrap JavaScript 库：确保您已在项目中包含 Bootstrap JavaScript 库。 HTML 中的结束标记之前应包含以下行：

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

此脚本包含 Bootstrap 组件工作所需的 JavaScript，包括下拉菜单

1. 检查 JavaScript 错误：打开浏览器的开发者控制台 （通常通过按 F12 或右键单击并选择“检查”） 并查找任何可能阻止的 JavaScript 错误 从工作中下拉。修复这些错误通常可以解决问题 问题。

2. 检查 jQuery 冲突：如果您将 jQuery 与 Bootstrap，保证两者不冲突 图书馆。 Bootstrap 5 已经不再依赖 jQuery，所以 确保您使用的是最新的 Bootstrap 5 JavaScript，而不是 将其与旧版本或依赖于 jQuery 的代码混合。

3. 确认 Bootstrap CSS 已正确包含：确保您有 将 Bootstrap CSS 文件包含在 HTML 文档的头部。 它应该看起来像这样：

   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
   

4. 检查数据属性设置是否正确：确保 data-bs-toggle 属性在下拉开关上设置为“dropdown” 元素（在你的情况下是标签）。 data-bs-toggle="下拉菜单" 属性应该触发下拉菜单。

5. 验证 Laravel 的 Blade 模板：由于您使用的是 Laravel， 确保 Laravel 的 Blade 模板引擎不会干扰 与下拉元素的 HTML 结构和属性。