Как создать несколько выпадающих меню с Materialise CSS?

Question

Как я могу создать n выпадающих меню, используя Materialize CSS и JavaScript? Я попытался создать одну раскрывающуюся структуру и заставить все кнопки вызывать это одно раскрывающееся меню, но ничего не происходит, когда я нажимаю на любую из кнопок.

<div id="button-container">
</div>

<ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
 </ul>

var htmlStr = ''
for (var i = 0; i < 100; i++) {
    htmlStr += `
        <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
    `
}
$(#button-container).html(htmlStr)

Answer 1

Данные-цели должны быть уникальными, поэтому эта строка, повторяемая 100 раз, является проблемой:

<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>

Неуникальные данные-цели будут препятствовать работе любого из триггеров раскрытия.

Как правило, выпадающий триггер и цели должны входить в уникальные пары.

Answer 2

Я протестировал ваш код и думаю, что проблема в том, что вы не инициализировали выпадающий список. Вы можете сделать это, используя:

  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.dropdown-trigger');
    var instances = M.Dropdown.init(elems);
  });

  // Or with jQuery

  $('.dropdown-trigger').dropdown(); 

Взгляните на Материализация Do c - Инициализация выпадающего списка

В этой скрипте есть рабочий код .