javascript - 为什么 Laravel bootstrap 下拉菜单不起作用
问题描述
这是我的导航栏
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="/teashirt/public/">TeaShirt</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/teashirt/public/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teashirt/public/design">Desing your Teashirt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teashirt/public/about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teashirt/public/contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teashirt/public/checkout">Checkout</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/teashirt/public/cart" tabindex="-1" aria-disabled="true">Cart</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Guest!</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
这是我的 bootsrap.js
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
这是我的 app.js
require('./bootstrap');
Visual Studio Code 提供替换require
为import
,但它没有工作。
我试过 -popper upgrade -composer update
没有任何工作。一切都在导航栏上运行,但是当我单击下拉菜单时,它只会转到链接 /#。我已经在 IE 和 chrome 上试过了。结果相同
解决方案
我不认为答案已经完全解决,因为这个解决方案并不是很容易接受。我可以在安装最新的 laravel 7 composer 时重现该错误,然后是“artisan ui bootstrap”和 npm install && npm run dev:
可能是 webpack 问题,因为这里的行为似乎相同: https ://github.com/webpack/webpack/issues/10504
我还没有找到解决方案——尝试不同的 laravel-mix、jquery 和 bootstrap 版本。
推荐阅读
- javascript - 将响应 Request.post 令牌保存在变量中
- python - 导入多个 CSV 文件并要求用户输入选择文件
- opencv - 尝试使用 pip 安装 opencv-python 不断引发错误。该怎么办?
- shell - 通过 PM2 将环境变量传递给 NextJS
- java - 在 JHipster 微服务应用程序中构建 UI 更改
- php - 从json响应中获取特定值不起作用
- react-native - 更新类型阴影节点中的属性“fontSize”时出错:RCTText
- typescript - 扩展不止一个类
- r - 将当前为文本文件的单个单元格计数矩阵转换为数据框
- sql - 重命名多个表前缀的 SQL 查询不起作用