function createList(listData) {
const list = document.createElement('ul');
for(const data of listData) {
const li = document.createElement('li');
const a = document.createElement('a');
a.innerText = data.name;
a.setAttribute('href', data.url);
li.appendChild(a);
let hasChild=false;
if(data.lists) {
hasChild=true;
li.appendChild(createList(data.lists));
}
li.setAttribute('class', 'treenode' + (hasChild ? '-expandable' : ''));
list.appendChild(li);
}
return list;
}
事件處理：
uj5u.com熱心網友回復：
switch(event.target.localName) {case "ul":
const ulnode = node.querySelector('ul');
//setAttribute用來設定元素的屬性，而display是style物件內的屬性
ulnode.style.display = (ulnode.style.display == "" ? "none" : "");
break;
case "li":
const ul = node.querySelector('ul');
//setAttribute用來設定元素的屬性，而display是style物件內的屬性
ul.style.display = (ul.style.display == "" ? "none" : "");
break;
case "a":
//preventDefault方法用來阻止元素發生默認的行為(點擊a標簽默認會轉向錨點鏈接)
// event.preventDefault();
// console.log(event.view.location.href);
//return;
break;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/227270.html
標籤：Web 開發
上一篇：springcloud-gateway 404問題求助
下一篇：XStream學習手冊