如何使用 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

這個小提琴中有一個工作代碼。

Answer 2

Data-target 應該是唯一的，所以這條線重復 100 次是個問題：

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

非唯一數據目標將阻止任何下拉觸發器工作。

通常，下拉觸發器和目標應該成對出現。