javascript - 动态下拉菜单的高度为 0
问题描述
我正在尝试在包含Materialize dropdown-trigger的 javascript 中动态创建 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 等)
分别初始化每个触发器。
解决方案
我无法重现您遇到的问题,但下面的解决方案可能会给出一个想法或可能有助于解决问题。另外,请注意,下面的代码部分做了一些假设。
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/
推荐阅读
- reactjs - 什么是用于快照测试的 react-scripts Jest 默认序列化程序?
- android - Firebase-ui 错误
- asp.net-mvc - 如何使用带有局部视图的 ViewModel
- node.js - 将 jBPM 与 Node.js 和 PostgreSQL 集成
- c - 以递归方式打印具有其他列表(相同结构)元素的列表
- powershell - PowerShell 远程启动进程不起作用
- c# - 列表的扩展方法
无法识别 C# 类的实例方法 - javascript - 从已删除的 DOM 元素中分离 jQuery 侦听器
- css - 为什么在 2d 比例变换期间文本变得模糊和摆动
- ios - CollectionView 滚动更改选定的单元格