树结构的多javascript切换

我有一个无限节点的树结构，如何在每个节点下放置

可切换内容

？ 我的意思是

可切换内容

对于所有节点都是相同的。 我为

设置
最小宽度
和
最小高度
。树李a

我希望

可切换内容

位于

下。树李a

现在切换1个节点的工作，每个节点下都不工作。
照片:

var toggle=document.getElementById（“toggle”）；
var content=document.getElementById（“内容”）；
toggle.addEventListener（“单击”），函数（）{
content.classList.toggle（“出现”）；
}，假）
正文{
字体系列：无衬线；
字体大小：15px；
}
.树{
变换：旋转（0度）；
变换原点：50%；
}
树胶{
位置：相对位置；
填充：1em 0；
空白：nowrap；
保证金：0自动；
文本对齐：居中；
}
.树ul：：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
李先生{
显示：内联块；
垂直对齐：顶部；
文本对齐：居中；
列表样式类型：无；
位置：相对位置；
填充：1em 0.5em 0.5em；
}
李树：以前，
李树：之后{
内容：''；
位置：绝对位置；
排名：0；
右：50%；
边框顶部：1px实心#ccc；
宽度：50%；
高度：1米；
}
李树：之后{
右：自动；
左：50%；
左边框：1px实心#ccc；
}
李树：独生子：：之后，
李树：独生子：：以前{
显示：无；
}
李树：独生子女{
填充顶部：0；
}
李树：第一个孩子：：之前，
李树：最后一个孩子：：之后{
边界：0无；
}
李树：最后一个孩子：：之前{
右边框：1px实心#ccc；
边界半径：0 5px 0 0；
}
李树：第一个孩子：：之后{
边界半径：5px0；
}
.树ul：：以前{
内容：''；
位置：绝对位置；
排名：0；
左：50%；
左边框：1px实心#ccc；
宽度：0；
高度：1米；
}
李树先生{
最小宽度：16em；
最小高度：5em；
边框：1px实心#ccc；
填充：0.5em 0.75em；
文字装饰：无；
显示：内联块；
边界半径：5px；
颜色：#333；
位置：相对位置；
顶部：1px；
变换：旋转（0度）；
}
李树答：悬停，
.树李a：悬停+ul李a{
背景：#e9453f；
颜色：#fff；
边框：1px实心#e9453f；
}
.树李a:悬停+ul李：：之后，
.树李a:悬停+ul李：：之前，
.树李a:悬停+ul：：之前，
.树李a:悬停+ul:：之前{
边框颜色：#e9453f；
}
#内容{
/*不要使用“显示无/阻止”！而是：*/
背景：#cf5；
填充：10px；
职位：继承；
可见性：隐藏；
不透明度：0.4；
过渡：0.6s；
-webkit转换：0.6s；
转化：translateY（-20%）；
-webkit转换：translateY（-20%）；
}
#内容显示{
能见度：可见；
不透明度：1；
变换：translateX（0）；
-webkit转换：translateX（0）；
}











此可切换内容与所有id=“toggle”相同
据我所知，
id
属性对于html文档应该是唯一的

您可以尝试使用
数据-
属性，然后通过
数据切换等方式匹配元素

据我所知，
id
属性对于html文档应该是唯一的

您可以尝试使用
数据-
属性，然后通过
数据切换等方式匹配元素

不要对多个元素使用相同的
id
，
id
应始终是唯一的

改用
class

<li class="toggle"> ... </li>

然后，您可以使用
for
循环（或者，
forEach
方法，如果您愿意的话），为每个循环分配一个事件侦听器：

for(let i = 0; i < toggle_list.length; i++) {
  toggle_list[i].addEventListener("click", toggleClick);
}

在本例中，
子元素[0]
将以单击的
中的第一个元素为目标，并且该子元素不需要单独的
class=“content”
属性。如果这不是您想要的，您可以将其更改为其他内容（可能是
子项[1]
：D）

更多信息：
不要对多个元素使用相同的
id
，
id
应始终是唯一的

改用
class

<li class="toggle"> ... </li>

然后，您可以使用
for
循环（或者，
forEach
方法，如果您愿意的话），为每个循环分配一个事件侦听器：

for(let i = 0; i < toggle_list.length; i++) {
  toggle_list[i].addEventListener("click", toggleClick);
}

在本例中，
子元素[0]
将以单击的
中的第一个元素为目标，并且该子元素不需要单独的
class=“content”
属性。如果这不是您想要的，您可以将其更改为其他内容（可能是
子项[1]
：D）

更多信息：
✔️ 用这种方法解决：


功能切换文档（事件）{
var next=event.target.nextElementSibling；
如果（next.style.display==“无”）{
next.style.display=“block”；
}否则{
next.style.display=“无”；
}
}
document.addEventListener（'click'，toggleDocs，true）
正文{
字体系列：无衬线；
字体大小：15px；
}
.树{
变换：旋转（0度）；
变换原点：50%；
}
树胶{
位置：相对位置；
填充：1em 0；
空白：nowrap；
保证金：0自动；
文本对齐：居中；
}
.树ul：：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
李先生{
显示：内联块；