具有内容切换功能的JavaScript列表，就像手风琴一样，

Question

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

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

Answer 1

尝试这样的事情：

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

1. 您的div必须在li内，否则您的HTML无效
2. 不要使用多个id的内容，content1，content2 ...，它没有用，而是定义一个类。
3. 单击li元素后，找到div元素（将其过滤掉），然后对其应用所需的样式。
4. 您需要将div的布局调整到该段落的下方，现在它位于右侧，但可以进行适当的切换。

JS

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')
  })
}