Javascript 嵌套有序切换列表，非重复

我正在编写一个二分法键：一个有序的切换列表，每个级别有两个选项可供选择。嵌套项以后不能重复编号，但会增加编号。数字需要附加“a”和“b”：

1a

2a

3a

3b

2b

4a

4b

1b

5a

6a

6b

5b

7a

7b

基本HTML有序列表：

<ol>
  <li>1a
    <ol>
      <li>2a
    <ol>
      <li>3a</li>
      <li>3b</li>
    </ol>
  </li>
  <li>2b
    <ol>
      <li>4a</li>
      <li>4b</li>
    </ol>
  </li>
</ol>

我需要什么样的JQuery和CSS组合才能让嵌套项在它停止的地方进行编号，而不是重新启动它？嵌套需要进入无限深的层次，同时不要在列表中的任何地方重复数字

如何调整以下CSS以添加字母，而不是十进制数字

   <style>
        html>/**/body ol { /* Won't be interpreted by IE6/7. */
            list-style-type: none;
            counter-reset: level1;
        }
        ol li:before {
            content: counter(level1) ". ";
            counter-increment: level1;
        }
        ol li ol {
            list-style-type: none;
            counter-reset: level2;
        }
        ol li ol li:before {
            content: counter(level1) "." counter(level2) " ";
            counter-increment: level2;
        }
        ol li span { /* For IE6/7. */
            margin: 0 5px 0 -25px;
        }
    </style>

html>/**/body ol{/*不会被IE6/7解释*/
列表样式类型：无；
计数器复位：1级；
}
奥利：以前{
内容：柜台（一级）”；
反增量：1级；
}
奥利奥{
列表样式类型：无；
计数器复位：2级；
}
奥利：以前{
内容：柜台（一级）““柜台（二级）”；
反增量：2级；
}
ol li span{/*适用于IE6/7*/
利润率：0.5px 0-25 px；
}

有人问过关于嵌套列表或更改编号样式的问题，但我找不到具有这种非重复编号和切换选项的列表。见-和

我需要什么样的JQuery和CSS组合才能让嵌套项在它停止的地方进行编号，而不是重新启动它

我们没有能力做到这一点

您可以在一个新的嵌套级别上将它们重置为零，这样做可以确定它们的范围，但是它们不是连续的（）。您只能初始化它们一次，但是对于更高级别的项（）它们不会被重置。使用类似的方法，您甚至可以根据需要枚举第一个和最里面的项，但仍然不能枚举b项（）

只有当你知道每个列表有两个子元素，并且你的深度是固定的，你才有可能做一些聪明的反算——我想你也需要为每个级别设置一个单独的计数器。确实有可能：

/*仅计数器样式-无列表样式，ab计数器除外
应使用SASS/LESS编码，手工操作没有乐趣：-）
以下是一个最多4个级别的示例中的规则：*/
/*每个ol增加其级别和更低级别的计数器*/
ol{计数器增量：level0 level1 level2 level3；}
ol ol{计数器增量：level1 level2 level3；}
ol{计数器增量：level2 level3；}
ol{计数器增量：level3；}
/*级别最后一个列表项中的ol也应提升上述级别
按其父列表中的ols数*/
li:last child>ol{计数器增量：level0 14 level1 level2 level3；}
李莉：最后一个子>ol{计数器增量：level1 6 level2 level3；}
li:last child>ol{计数器增量：level2 2 level3；}
/*                                                   ^
该数字可以计算为2^（最高级别）-2
在这里：14=2^4-2；6 = 2^3-2; 2 = 2^2-2
第一级的额外规则实际上可以省略*/
/*每个li都应该使用计数器来显示其液位*/
李：在{content:counter（level0）“；}之前
李莉{内容：计数器（1级）“；}
李莉：在{内容：计数器（2级）“；}
李莉：在{内容：计数器（3级）“；}

（，）

如何调整计数器CSS以添加字母，而不是小数

可以将列表样式类型作为第二个参数传递给计数器函数（）：

---

你为什么要避免离婚？或者你有没有其他因素可以让div变得多余？请向我们展示您的标记。使用DIVs，我可以获得嵌套列表的外观，带有缩进，但我需要一个正确的有序列表，并带有不重复的编号。我添加了JQuery和CSS，你现在用什么CSS来编号？请再次向我们展示您的HTML标记。我添加了有序列表的HTML，以及以前共享过的CSS，但是如何添加字母？CSS能提供不重复的数字吗？谢谢你的帮助；这个问题越来越大了。谢谢你的加价，我要写一个答案。顺便说一句，你忘记关闭第二层的一些

了。谢谢你，伯吉。我正在考虑我的困境，可能不得不完全放弃CSS计数器，除非我能找到一位数学家正式定义这种编号模式。哇，谢谢！我将试着把它带到9或10个嵌套级别。如果我拿不到，我就回来。如果我真的得到了它，我会把我所有的东西都发出去。：）因此，我将嵌套设置为5个级别，但CSS似乎希望每个父级都有一个平衡的子级数量——每个级别都有这样的子级。编号跳转到更高的数字。是的，我希望深度是固定的。否则，就不可能知道在第二个

li

中，你的父母

ol

之上有多少

ol

。我猜需要用其他计数器的值初始化计数器…这在CSS中是不可能的。恐怕你只能手工编号了。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>

.display {display:none;
padding-left: 30px;
}

   <style>
        html>/**/body ol { /* Won't be interpreted by IE6/7. */
            list-style-type: none;
            counter-reset: level1;
        }
        ol li:before {
            content: counter(level1) ". ";
            counter-increment: level1;
        }
        ol li ol {
            list-style-type: none;
            counter-reset: level2;
        }
        ol li ol li:before {
            content: counter(level1) "." counter(level2) " ";
            counter-increment: level2;
        }
        ol li span { /* For IE6/7. */
            margin: 0 5px 0 -25px;
        }
    </style>

content: counter(level1) counter(level2, lower-latin) " ";