如何使用MaterializeCSS创建多个下拉菜单？

Question

如何使用MaterializeCSS和JavaScript生成n个下拉菜单？我尝试创建一个下拉菜单结构，并让所有按钮触发一个下拉菜单，但是当我单击任何按钮时都没有任何反应。

<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

我测试了您的代码，但我认为问题在于您尚未初始化下拉菜单。您可以使用：

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

  // Or with jQuery

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

看看Materialize Doc - Dropdown Initialization

fiddle中有一个工作代码。

Answer 2

数据目标应该是唯一的，因此此行重复了100次是一个问题：

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

非唯一数据目标将阻止任何下拉触发器起作用。

通常，下拉触发器和目标应该成对出现。