Drop down menu Bootstrap4下拉列表仅在第二次单击时有效
我正在做一个django项目,它使用bootstrap4,我对下拉切换有点问题 切换器仅在第二个链接后切换下拉菜单 我做错了什么 这是我的下拉HTML代码:Drop down menu Bootstrap4下拉列表仅在第二次单击时有效,drop-down-menu,bootstrap-4,Drop Down Menu,Bootstrap 4,我正在做一个django项目,它使用bootstrap4,我对下拉切换有点问题 切换器仅在第二个链接后切换下拉菜单 我做错了什么 这是我的下拉HTML代码: <li class="nav-item dropdown show"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Toggler
</a>
<div class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item">Link 1</a>
<a class="dropdown-item">Link 2</a>
</div>
</li>
链接1
链接2
您需要像这样使用切换,并将数据目标
分配给带有id的下拉菜单
使用
数据目标=“#navbarDropdown”
然后将该id分配给菜单
<li class="nav-item dropdown show">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdown" aria-controls="navbarDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarDropdown" class="dropdown-menu" role="menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item">Link 1</a>
<a class="dropdown-item">Link 2</a>
</div>
</li>
链接1
链接2
我遇到了同样的问题,然后解决了。我经常会因为引导js库的双重导入而失败。
希望对您有所帮助。尝试将引导js文件放在引导css之前 例:
我最近遇到了同样的问题,我通过在加载下拉列表后添加$('.dropdown toggle').dropdown()解决了这个问题。希望这可能会有所帮助,而不会从data toggle=“dropdown”更改为data toggle=“collapse”。同意Iwan B。在Java脚本中的Rails中,我只留下bootstrap.bundle.js。在Gemfile中分别添加gem'popper_js'、'~>1.14.5',在application.js中我们应该添加
//=require popper我最近遇到了同样的问题,我通过编写自定义脚本解决了这个问题:
<div class="filter-dropdown text-right">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) {
e.preventDefault();
$(this).parent().addClass("show");
$(this).attr("aria-expanded", "true");
$(this).next().addClass("show");
});
编辑
$(“.filter dropdown”)。在(“单击”,“.dropdown切换”,函数(e){
e、 预防默认值();
$(this.parent().addClass(“show”);
$(this.attr(“aria expanded”,“true”);
$(this.next().addClass(“show”);
});
我也遇到了同样的问题,因为我导入了两次引导库。移除其中一个后,效果良好。
希望它对您有所帮助。通常您不应该在
中加载脚本,但我会向您推荐一种现代方法。是的,这也是我的问题。我使用了Mix extract vendor,我在那里添加了整个boostrap.js,而在我的入口点中只有cherry选择了一些js组件,laravel Mix变得混乱。继续回答这个问题,我使用的模板加载了自己的js,它也加载了bootstrap.js文件,所以必须删除以前添加的这是我的问题。我使用Laravel,引导js文件已经存在于app.js中。
<div class="filter-dropdown text-right">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Edit</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
$(".filter-dropdown").on("click", ".dropdown-toggle", function(e) {
e.preventDefault();
$(this).parent().addClass("show");
$(this).attr("aria-expanded", "true");
$(this).next().addClass("show");
});