带有内容切换功能的 javascript 列表就像手风琴一样，答案

【问题标题】：javascript list with content toggling acting like accordion,带有内容切换功能的 javascript 列表就像手风琴一样，
【发布时间】：2020-04-13 19:15:02
【问题描述】：

我对纯 JS 列表有疑问。我希望在单击特定 li 后显示带有内容（每个 li 下方）的 div。不知道如何使它工作。我要么显示一个“内容”块，要么一次显示全部（通过添加现在评论的一次。任何帮助表示赞赏。

const channelList = document.getElementById("station-list");

channelList.addEventListener("click", function (e) {
    const target = e.target;
    if (target.matches("li")) {
        content.classList.toggle("show");
        //content2.classList.toggle("show");
        //content3.classList.toggle("show");
        //content4.classList.toggle("show");
        //content5.classList.toggle("show");
        //content6.classList.toggle("show");
    }
})

https://jsbin.com/valojoruhe/1/edit?html,js,output

【问题讨论】：

标签： javascript list toggle accordion

【解决方案1】：

试试这样的：

小提琴示例：https://jsfiddle.net/eugensunic/9ebxvt1u/

你的 div 必须在 li 内，否则你的 html 无效
不要使用多个id的内容，content1，content2……没用，不如定义一个类。
单击 li 元素后，找到 div 元素（将其过滤掉），然后对其应用所需的样式。
您需要调整 div 的布局，使其位于段落下方，目前它位于右侧，但可以适当地切换。

const getAllLiElements = document.querySelectorAll('li');
for (let i = 0; i < getAllLiElements.length; i++) {
  let element = getAllLiElements[i];
  element.addEventListener('click', () => {
    const dummyText = Array.from(element.children).filter(htmlNode => htmlNode.tagName === 'DIV')[0]
    dummyText.classList.toggle('show')
  })
}

【讨论】：