Bootstrap 4菜单不打开其他下拉菜单

Question

因为我试图让Text保持链接，并通过下拉切换打开下拉列表，我已经成功实现了这一点。但它导致Dropdown 2切换/打开Dropdown 1。只有Dropdown 1在起作用。

基本上，我不明白为什么它只打开Dropdown 1只有哪个Dropdown我点击

我使用Bootstrap 4.4.1

你可以在这里看到钢笔https://codepen.io/cr8tivly/pen/MWavBJr

这是标记

<nav class="navbar navbar-expand-lg navbar-light"> 
<ul class="row row-cols-4 navbar-nav main relative list-unstyled col-6"> 
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false"> 
<a class="" href="http://google.com">Dropdown-1</a> 
<ul class="dropdown-menu"> 
<li>item-1-one</li> 
<li>item-2-one</li> 
<li>item-3-one</li> 
<li>item-4-one</li> 
</ul> 
</li> 
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false"> 
<a class="" href="http://google.com">Dropdown-2</a> 
<ul class="dropdown-menu"> 
<li>item-1-two</li> 
<li>item-2-two</li> 
<li>item-3-two</li> 
<li>item-4-two</li> 
</ul> 
</li> 
<li class="col"><a href="#">Three</a></li> 
<li class="col"><a href="#">Four</a></li> 
</ul> 
</nav> 

Answer 1

问题是data-toggle="dropdown"应该在a上。请查看此处的文档。

代替：

<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false"> 
<a>Dropdown-1</a>

用途：

<li class="col nav-item dropdown" aria-expanded="false"> 
<a data-toggle="dropdown">Dropdown-1</a>

此处更新了笔。

Answer 2

如果你想用加号打开下拉列表，用文本打开链接，你可以这样做：

<li class="col nav-item">
<div class="d-flex">
<a class="btn btn-link" href="http://google.com">Dropdown-2</a> 
<button class="btn btn-light dropdown" id="d2" data-toggle="dropdown" aria-expanded="false">+</button>
<ul class="dropdown-menu" aria-labelledby="d2"> 
<li>item-1-two</li> 
<li>item-2-two</li>
<li>item-3-two</li> 
<li>item-4-two</li> 
</ul>
</div> 
</li>