laravel - Bootstrap 汉堡菜单图标不会折叠
问题描述
我正在尝试将此引导导航菜单添加到我的 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>
我在控制台中也有这些错误消息:
未捕获的类型错误:无法在 HTMLDivElement 的 RegExp.test () 中将对象转换为原始值。(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)
解决方案
我知道了。
感谢这个答案:https ://stackoverflow.com/a/61198996/7133015
这是 bootstrap 和 kquery (3.5.0) 之间的不兼容。需要切换回 jquery 3.4.1
推荐阅读
- jvm - double 值是如何存储在 JVM 中的,JVM 是如何从内存中读出其对应的二进制值并将其转换为十进制值的?
- python - 名称“赢家”未定义
- amazon-web-services - AWS AppSync 是否有限制定义?
- python - 切片数据帧捕获错误“TypeError:元组索引必须是整数或切片,而不是 str”
- angular - Angular/Ionic 应用程序 - 尽管服务器端设置正确,但 CORS 问题
- corda - 当在 corda 中使用帐户和 oracle 时,谓词返回 false
- python - 构建自定义 keras 层,我遇到 InvalidArgumentError: Input 'pred' pass float expected bool while building
- node.js - 使用 Node.js 在 MognoDB 中查询
- windows - 退出 VSCode 中的“输入命令号”
- javascript - 获取vue cart list l中的模型关系