动态下拉菜单的高度为0

问题描述 投票：2回答：1

我正在尝试在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：

enter image description here

...即使检查表明它的高度应为50px：

enter image description here

我也尝试过：

为每个帖子添加唯一的下拉菜单内容（trigger1打开drop1，trigger2打开drop2，依此类推）

分别初始化每个触发器。

javascript dynamic dropdown materialize
1个回答
0
投票

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

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 Live示例：https://jsfiddle.net/ErdSavasci/vs37au84/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.