我有4个MDL标签,每个标签中都动态创建一个MDL卡列表。每张卡都有一个如下创建的MDL菜单:
// job settings dropdown :
settingsButton.setAttribute('id', 'jobSettings');
var jobUl = document.createElement('ul');
jobUl.className = 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect';
jobUl.setAttribute('for', 'jobSettings');
var jobLi = document.createElement('li');
var jobLi2 = document.createElement('li');
var jobLi3 = document.createElement('li');
jobLi.className = 'mdl-menu__item';
jobLi2.className = 'mdl-menu__item';
jobLi3.className = 'mdl-menu__item';
jobLi.textContent = 'Edit';
jobLi2.textContent = 'Delete';
jobLi3.textContent = 'Pay';
jobUl.appendChild(jobLi);
jobUl.appendChild(jobLi2);
jobUl.appendChild(jobLi3);
将在html中显示如下内容:
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Edit</li>
<li class="mdl-menu__item">Delete</li>
<li class="mdl-menu__item">Pay</li>
然后,我componentHandler.upgradeDom();
希望升级每个无序列表(ul)中的mdl菜单项。
这似乎仅适用于整个网站中的一个列表元素(li)。它不适用于任何其他选项卡上的任何其他元素。 如何在每个动态创建的ul中的每个动态创建的列表元素上使用我的mdl菜单?
答案 0 :(得分:0)
问题可能是您正在多个菜单元素上复制id
值(如果有多个按钮的id
值与for
相匹配,则MDL会感到困惑菜单元素上的值)。您可以在id
和for
值中添加数字增量,以确保每个菜单都是唯一标识的。
请参见以下示例。请注意,Object.assign
用于缩短代码,但是由于限制,我们仍然需要使用setAttribute
来设置for
元素的ul
属性,因为该属性无法直接访问。
const fragment = document.createDocumentFragment();
const addCard = (n) => {
let card = document.createElement('div');
let menu = document.createElement('div');
let button = document.createElement('button');
let icon = document.createElement('i');
let list = document.createElement('ul');
let items = ['Action 1', 'Action 2', 'Action 3'];
icon.textContent = 'more_vert';
Object.assign(card, {className: 'mdl-card mdl-shadow--2dp'});
Object.assign(menu, {className: 'mdl-card__menu'});
Object.assign(button, {
className: 'mdl-button mdl-js-button mdl-button--icon',
id: 'menu' + n
});
Object.assign(icon, {className: 'material-icons'});
Object.assign(list, {
className: 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect'
});
list.setAttribute('for', 'menu' + n);
fragment.appendChild(card);
card.appendChild(menu);
menu.appendChild(button);
button.appendChild(icon);
menu.appendChild(list);
for (let item of items) {
let listItem = document.createElement('li');
listItem.textContent = item;
Object.assign(listItem, {className: 'mdl-menu__item'});
list.appendChild(listItem);
}
}
for (let i = 0; i < 2; i++) {
addCard(i);
}
document.querySelector('#container').appendChild(fragment);
componentHandler.upgradeDom();
.mdl-card {
margin: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite Cards / Menus</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<div id="container"></div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>