Несколько выпадающих Bootstrap в одном классе div

Question

Возможно ли иметь несколько выпадающих меню в одном и том же классе nav в начальной загрузке, не помещая каждый элемент меню в отдельный div?

Что происходит, когда я нажимаю на раскрывающееся меню, каждый раз открывается одно и то же раскрывающееся меню (у меня есть два раскрывающихся списка для двух отдельных пунктов меню)

Я пытался использовать data-target, чтобы открыть только раскрывающийся список с определенным идентификатором, но это возвращает ошибку консоли.

  <nav>
      <a>Menu item 1</a>
      <a>Menu item 2</a>
      <a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu item 3(dropdown menu 1)</a>
        <div class="dropdown-menu" aria-labelledby="dropdown">
          <a class="dropdown-item" href="/">dropdown item 1</a>     
        </div>


      <a class="dropdown dropdown-toggle" href="#" style= "display:none;" id="certdropdown" data-toggle="dropdown" data-target="#dropdown2" aria-haspopup="true" aria-expanded="false">Menu item 3 ( dropdown menu 2)</a>
      <div class="dropdown-menu" aria-labelledby="dropdown" id ="dropdown2">
          <a class="dropdown-item" href="/">dropdown item 1</a>     
        </div></nav>

Если я разделяю оба пункта меню в отдельном div, это работает, но мой CSS разрушен

Answer 1

Предложение здесь выглядит хорошо.По сути, вам нужно использовать btn-groups, как показано в в этом примере и чуть выше его в документе .

Использование кода со стилем отображения none и ненужным идентификатором, снятым свторой выпадающий список:

<nav>
  <a>Menu item 1</a>
  <a>Menu item 2</a>

  <div class="btn-group">
    <a class="dropdown dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Menu item 3(dropdown menu 1)
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdown">
      <a class="dropdown-item" href="/">dropdown item 1</a>     
    </div>
  </div>

  <div class="btn-group">
    <a class="dropdown dropdown-toggle" href="#" id="certdropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Menu item 3 ( dropdown menu 2)
    </a>
    <div class="dropdown-menu" aria-labelledby="dropdown">
      <a class="dropdown-item" href="/">dropdown item 1</a>     
    </div>
  </div>
</nav>

Подробнее о о группах кнопок можно прочитать здесь .

Answer 2

Нет, невозможно иметь два выпадающих меню внутри одного и того же div.Они должны быть разделены, так как код для их переключения ищет первый элемент в родительском div кнопки / якоря.Так что, если они находятся в одном родительском div, будет переключаться только первое.

Поскольку вы не указали, какая часть вашего CSS испорчена, я предполагаю две проблемы, с которыми вы можете столкнуться при этом.

1. Раскрывающиеся кнопки переносятся в следующую строку.
2. Вы выбираете ссылки внутри своей навигации, нажимая nav > a, который игнорирует ссылки внутри <div class="dropdown"></div> или вас.повторно выбирайте ссылки внутри вашей навигации, выполнив nav a, который включает ссылки внутри выпадающего меню.

---

Первое решение:

ЕслиВаши выпадающие кнопки / ссылки размещаются в своем собственном ряду, потому что они имеют отображаемое значение block.Добавьте класс d-inline к <div class="dropdown">, чтобы исправить это.

Второе решение:

Выберите и стилизуйте свои ссылки внутри nav с помощью этого кода:

nav a:not(.dropdown-item) {
  // styling
}

Это будет игнорировать ссылки внутри выпадающего списка, но стилизовать все остальные ссылки.

---

Если у вас возникли другие проблемы с вашим CSS, пожалуйста, объясните, что это такое, и япостараюсь вам помочь.