描述:点击侧边栏的item,就给我item添加li描述
如图:
主要代码:
const getItemLi = (arr,key) => {//循环给ul里添加li元素
console.log(arr,key)
arr.forEach(itemLi => {
var li=document.createElement('li')//创建li
li.innerText=itemLi
let liDiv=document.getElementById(key)//找到ul元素
console.log(liDiv)
liDiv.appendChild(li)//给ul添加li元素
})
}
const titleInfoList = [
{
key: 0,
path: "/en/whatsai",
info: "AI Fundamentals",
titleArr: [
"What is Artificial Intelligence (AI)?",
"History and Evolution of AI",
"Basic Components and Terminologies in AI"
]
},
{
key: 1,
path: "/en/UnderstandingMachineLearning",
info: "Understanding Machine Learning",
titleArr: [
"Introduction to Machine Learning and its Core Concepts",
"Supervised, Unsupervised, and Reinforcement Learning",
]
}
]
const titlePath = window.location.pathname
const getItemLi = (arr,key) => {//循环给ul里添加li元素
console.log(arr,key)
arr.forEach(itemLi => {
var li=document.createElement('li')//创建li
li.innerText=itemLi
let liDiv=document.getElementById(key)//找到ul元素
console.log(liDiv)
liDiv.appendChild(li)//给ul添加li元素
})
}
titleInfoList.forEach(item => {
if (item.path === titlePath) {
listArr[item.key].innerHTML = `<div
class="v-list-item__title v-list-item__title_hover">
<div>${item.info}<div>
<ul id="titel${item.key}" ></ul>
</div>`
getItemLi(item.titleArr,'titel'+item.key)//循环给ul里添加li元素
listArrItem[item.key].style.background='#FFFFFF1A'
}
})