gpt4 book ai didi

javascript - 动态下拉菜单的高度为 0

转载 作者:行者123 更新时间:2023-12-03 23:33:39 26 4
gpt4 key购买 nike

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

...即使检查显示它的高度应该为 50 像素:

enter image description here

我也试过:

为每个帖子添加唯一的下拉内容(trigger1 打开 drop1,trigger2 打开 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/

关于javascript - 动态下拉菜单的高度为 0,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59071929/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com