Bootstrap 汉堡菜单图标不会折叠

Question

我正在尝试将此引导导航菜单添加到我的 Laravel 应用程序中，但在较小的屏幕尺寸下，当我单击汉堡包图标时它不会打开。

我在这里检查了类似的问题并尝试了解决方案，但没有一个对我有用。

我还检查了，bootsrap css 和 js 正确包含在文档中，在我的页脚中首先是 jquery，然后是 popper，然后是 bootstrap.js。

这是我的 header 代码：

<header>

        <nav class="navbar navbar-expand-lg fixed-top">
            <div class="container">
                <a class="navbar-brand" href="{{ route('home') }}"><img src="{{ asset('public/assets/frontend/images/logo.png') }}"></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                    <ul class="navbar-nav">
                            <li class="nav-item"><a class="nav-link" href="{{ route('home') }}">Home</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ route('frontend.courses') }}">Courses</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                            <li class="nav-item"><a class="nav-link" href="{{ route('contact') }}">Contact</a></li>
                        @guest
                            <li class="nav-item"><a class="btn btn-red" href="{{ route('login') }}">Sign In</a></li>
                            @else
                                @if(Auth::user())
                                    <li class="nav-item logged-in">

                                        <div class="dropdown">
                                            <a href="" class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                <i class="fa fa-user fa-lg" aria-hidden="true"></i> My Dashboard
                                            </a>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                @if(Auth::user()->role_id == 1)
                                                <a class="dropdown-item" href="{{ url('admin') }}">Admin</a>
                                                @endif
                                                <a class="dropdown-item" href="#">My Profile</a>
                                                <a class="dropdown-item" href="#">Settings</a>
                                                <a class="dropdown-item" href="{{ route('logout') }}" onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">Log out</a>
                                                     <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                                        @csrf
                                                    </form>
                                            </div>
                                        </div>

                                    </li>
                                @endif
                        @endguest

                    </ul>
                </div>
            </div>
        </nav>

    </header>

我在控制台中也有这些错误消息：

未捕获的类型错误：无法在 HTMLDivElement 的 RegExp.test () 中将 object 转换为原始值。 (collapse.js:346) 在 Function.each (jquery-3.5.0.min.js:2) 在 S.fn.init.each (jquery-3.5.0.min.js:2) 在 S.fn。 HTMLDivElement 处的 init.a._jQueryInterface [as collapse] (collapse.js:337)。 (collapse.js:385) 在 Function.each (jquery-3.5.0.min.js:2) 在 S.fn.init.each (jquery-3.5.0.min.js:2) 在 HTMLButtonElement。 (collapse.js:381) 在 HTMLDocument.dispatch (jquery-3.5.0.min.js:2)

Answer 1

我知道了。

感谢这个答案： https://stackoverflow.com/a/61198996/7133015

这是 bootstrap 和 kquery (3.5.0) 之间的不兼容。 需要切换回 jquery 3.4.1