我试图让bootstrap dropdown工作,bootstrap显示正确,但dropdown动作不工作,我怀疑这与jquery有关,但jquery工作得很好。
./Gemfile
gem "bootstrap", "~> 4.4"
gem "jquery-rails", "~> 4.3"
字符串
./app/assets/stylesheets/application.scss
@import "bootstrap";
型
./app/javascript/packs/application.js
//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
型
在我的浏览器控制台上调用
$('.dropdown-toggle')
型
工作正常,但当调用
$('.dropdown-toggle').dropdown()
型
说Uncaught TypeError: $(...).dropdown is not a function at <anonymous>:1:23
下面是从Bootstrap's navbar example复制的html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
型
编辑:
Popper.js被正确地包含在内,我已经通过删除手动导入测试了这一点,我认为问题是当包含jquery和bootstrap时,因为一旦我删除了其中一个手动导入,下拉列表就会中断(不改变视图)
3条答案
按热度按时间nkoocmlb1#
正如here所解释的,bootstrap 4下拉菜单构建在第三方库popper.js上,该库提供动态定位和视口检测。也许你没有popper.js,或者它由于某种原因不工作。
qacovj5a2#
我不知道我的回答现在是否有意义。但是我能够通过在application.html.erb文件中进行更改来修复下拉列表问题。
之前是这样的
字符串
然后我就改成了这个
型
8tntrjer3#
在
data-target="dropdown"
之后添加data-target="dropdown-menu"
部分。