Bootstrap 4 меню не открываются другие выпадающие

Question

Потому что я пытаюсь, чтобы текст оставался ссылкой, а выпадающий список открывал выпадающий список, чего мне удалось достичь. Но это вызывает Dropdown-2 для переключения / открытия Dropdown-1. И только Dropdown-1 работает.

По сути, не могу понять, почему только его раскрывающийся Dropdown-1, который когда-либо выпадающий я нажимаю

Я использую 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>