Javascript HTML折叠/展开树未按预期工作

我想用多层次结构折叠类别树。我从stack中尝试了很多答案，但都不起作用。有人能帮我吗

我尝试了以下代码：

实际结果：

• 第一次显示测试1和测试3
• 然后，单击测试1=>单击测试2，应该显示测试8
• 然后，单击测试2=>单击测试4，应该显示测试7
• 等等

更新：

片段：

$（文档）.ready（函数（）{
var getChild=$（'ul.categories'）.children（'li'）；
getChild.each（函数（i，v）{
if（$（v）.data（'parentcategory'）==“0”）{
$（v）.addClass（'active-collapse'）；
}
});
$（'div.categories-list li'）。单击（函数（）{
var main_category=$（this）.data（'parentcategory'）；
$（'ul.sub'，$（this.parent（））.eq（0.toggle（）；
});
});
div.categories-list{
宽度：30%；
边缘底部：20px；
浮动：左；
}
ul.类别，
ul.sub{
边框顶部：1px实心#c3cfd9；
保证金：0；
填充：0；
}
ul.li{
保证金：0；
填充：0；
列表样式：无；
}
ul.LIA{
显示：块；
最大宽度：100%；
填充：10px 5px 10px 10px；
字体大小：13px；
背景:#fcfc；
颜色：#3f729b；
边框：1px实心#c3cfd9；
边框顶部：0px！重要；
文字装饰：无；
字号：700；
光标：指针；
过渡：所有150毫秒都放松；
-webkit过渡：所有150毫秒的缓变；
}
ul.a:悬停{
文本缩进：5px；
}
ul.sub{
显示：无；
}
.activeUi{
显示：块；
}



测试1


测试2

测试4
测试5
测试6


测试7


测试8
测试9


测试3

我认为主要问题在于html结构，如果要创建一个级别，需要在
li
元素中使用
anchor
在该级别创建
li

例如，要在测试1.0中添加测试2.2，您需要在
锚定
后找到下一个ul.sub，该锚定是针对测试1.0的，并使用
锚定
添加另一个
li
，如果您想在TEST2.2中创建另一个子菜单，则需要使用类sub和另一个
li创建
ul

<li class="single deactive-collapse">
    <a class="li-single-text" style="padding-left:5%">Test 2.2 LAST</a>
    <ul class="sub" >
        <li class="child deactive-collapse">
            <a class="li-child-text" style="padding-left:10%">Test 3.2 LAST</a>
        </li>
    </ul>
</li>




测试1.0


测试2.0


最后测试3.0


最后测试3.0


最后测试3.0




测试2.1最后


测试8


测试9




测试2.2最后


最后测试3.2






测试1.1

上次测试2.1
上次测试2.1


上次测试1.2

是的，您对ul li的结构有一些问题。请看一下我的演示。您可以将您的类和属性添加到您的遗嘱中。它不会妨碍你


document.querySelector（'.categories'）.addEventListener（'click'，（e）=>{
常数el=e.ta