Jquery 具有树级别的引导折叠树视图（使用CSS）

大家好，我这里有一个树视图使用引导折叠

我试图使用CSS计数器添加折叠级别，但不幸的是，每次折叠之前，计数器上都会出现一些小故障

这就是我想要实现的目标

这就是我得到的

下面是我目前工作的示例代码

我哪里做错了？我只是不知道CSS计数器为什么乱七八糟。任何帮助都将不胜感激

.accordion.parent{
计数器复位：电平；
}
.accordion.parent.卡片：第一种类型{
反增量：级别；
}
.accordion.parent.card.card header h5按钮：之前{
内容：计数器（水平）；
}

以下树模式需要将

计数器重置

和

计数器增量

分配给一个祖先元素，该元素包含特定级别的所有

计数器（）

注意：计数器重置的默认值为
0
，显式赋值是可选的。在示例中指定它以显示增量模式

每个级别上的
计数器（）
的规则集使用，因为没有它，最后一个规则集将覆盖前面的规则集，因为每个级别嵌套在另一个级别中。以下模式将隔离每个级别：


HTML布局和某些BS类缺失或分配顺序错误。文档中的引导示例使用了大量的
s，这使得嵌套元素的深度非常困难。下面的演示使用了
和
以及组件）


演示

正文{
溢出y：滚动
}
#acc1{
计数器复位：A；
反增量：A；
}
#acc1>.card>.card header>h5>按钮：之前{
内容：柜台（A）；
}
#acc2{
计数器复位：B1；
反增量：B；
}
#acc2>.card>.card header>h5>按钮：之前{
内容：柜台（B）；
}
#acc3{
计数器复位：C2；
反增量：C；
}
#acc3>.card>.card header>h5>按钮：之前{
内容：柜台（C）；
}
#acc4{
计数器复位：d3；
反增量：D；
}
#acc4>.card>.card header>h5>按钮：之前{
内容:柜台(D);；
}

Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut labour and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作
两人或两人在无教区区的自由之地相互尊重。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut labour and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作
两人或两人在无教区区的自由之地相互尊重。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut labour and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作
两人或两人在无教区区的自由之地相互尊重。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
Lorem ipsum door sit amet，adipising elit，sed do eiusmod temporal incident ut labour and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作
两人或两人在无教区区的自由之地相互尊重。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡
1_______1 = #acc1 { counter-reset: A 0; counter-increment: A; }
    |
    2     = #acc2 { counter-reset: B 1; counter-increment: B; }
 3__|__3  = #acc3 { counter-reset: C 2; counter-increment: C; }
 |
 4        = #acc4 { counter-reset: D 3; counter-increment: D; }

#accN > .card > .card-header > h5 > button:before { content: counter(...); }