Question

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

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

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

这是我的标头代码：

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

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

未捕获的TypeError：无法将对象转换为原始值在RegExp.test（）在HTMLDivElement。（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.init.a._jQueryInterface [作为折叠]（collapse.js：337）在HTMLDivElement。（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

这是引导程序和kquery（3.5.0）之间的不兼容。需要切换回jQuery 3.4.1

Bootstrap汉堡菜单图标不会折叠

1 个答案: