Как вынести dropdown-menu в другой блок?

Question

[inavo]

Допустим имеется такой блок

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

Как можно вынести отдельно блок dropdown-menu чтобы было так:

<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
</button>

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

В bootstrap 3 такое работало, а в 4 уже нет. К тому же выпадашка не работает без класса dropdown-menu.

Answer 1

[v1t3man]

в 4й версии для этого можно использовать data-toggle="collapse", просто замените dropdown на collapse.
А уже если нужен data-toggle="dropdown", то придётся заключать в единый div.

Answer 2

[Евгений Пашков]

Для чего вам это? Просто мне кажеться это лишнее если вы хотите реализовать какую-то анимацию для выподения самого блока с ссылками. Это можно сделать и так.

Comments

[inavo]

хочется обновить бутстрап3 до 4й версии и теперь встаёт вопрос можно ли обновить не меняя элементы или всё же придётся переверстывать.

[Евгений Пашков]

inavo, боюсь придётся.