动态下拉菜单的高度为 0答案

【问题标题】：Dynamic Dropdown has 0 Height动态下拉菜单的高度为 0
【发布时间】：2019-11-27 14:03:06
【问题描述】：

我正在尝试在 javascript 中动态创建包含 Materialize dropdown-trigger 的 HTML 卡片。

    posts.forEach(function(element) {
        ....  
        message += '<a class="dropdown-trigger btn-flat" data-target="drop1">';
        message += '<i class="material-icons">more_vert</i>';
        message += '</a>';
        document.getElementById("post" + index).innerHTML = message;
        index++;
      }, this);
      M.AutoInit();

HTML 菜单内容：

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

如果我不使用动态添加创建按钮，一切都会按预期工作。如上图通过动态添加，菜单内容的高度为0：

...尽管检查表明它的高度应该是 50px：

我也试过了：

为每个帖子添加唯一的下拉内容（触发器1打开drop1，触发器2打开drop2等）

分别初始化每个触发器。

【问题讨论】：

好吧，它不起作用是很自然的。当您初始化组件时，它们会查找定义其行为的类或标识符（如下拉触发器）并附加这些行为。并且您在这些组件初始化之后创建元素，因此它们没有附加行为。您需要做的是重新初始化所有组件或初始化您手动创建的组件
@Eldar 感谢您的回复。我不确定您是否熟悉 Materialize 库，但 M.AutoInit() 命令应该重新初始化新组件。
"Auto Init 允许您使用单个函数调用来初始化所有 Materialize 组件。请务必注意，您不能使用此方法传入选项。"这不应该意味着它应该在函数调用之后初始化动态添加的组件

标签： javascript dynamic dropdown materialize

【解决方案1】：

我无法重现您遇到的问题，但以下解决方案可能会给出一个想法或可能有助于解决问题。另外，请注意，下面的代码部分做了一些假设。

var index = 1;
var posts = ["post1", "post2", "post3", "post4", "post5"];

posts.forEach(function(element) {
  let post = document.createElement('div');
  post.id = "post" + index;
  document.body.appendChild(post);

  // Remaining work..

  let cloneDrop = document.getElementById("dropTemplate").cloneNode(true);
  cloneDrop.style.visibility = "visible";
  cloneDrop.id = "drop" + index;
  document.getElementById("post" + index).appendChild(cloneDrop);

  // Remaining work..

  let message = '<a class="dropdown-trigger btn-flat" data-target="drop' + index + '">';
  message += '<i class="material-icons">more_vert</i>';
  message += '</a>';
  document.getElementById("post" + index).innerHTML += message;

  index++;
}, this);

M.AutoInit();

<html>
    <head>
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
       <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
    <body>
       <ul id="dropTemplate" style="visibility: hidden" href="#" class="dropdown-content">
           <li><a href="#!">one</a></li> 
           <!-- 
           Also, if <li/> element is being overridden by a stylesheet, following approach can be tried. (Of course, it is not so correct way) 
           <li style="width: 100px important; height: 50px !important">...</li> 
           -->
           <li><a href="#!">two</a></li>
           <li><a href="#!">three</a></li>
       </ul>
    
       <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </body>
 </html>

JSFiddle 实例：https://jsfiddle.net/ErdSavasci/vs37au84/

【讨论】：