html - Bootstrap 4菜单未打开其他下拉菜单

Question

因为我试图让文本保持链接和下拉切换以打开下拉列表，我已经设法实现了。但它导致 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> 

标签： htmljquerycsstwitter-bootstrap

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>

在这里更新了笔。