嵌套有序切换列表，不重复

Question

我正在编写一个二分键：一个有序的切换列表，每个级别有两个选项可供选择。嵌套项目以后不能重复编号，而是增加编号。数字需要附加'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>

<ol>
  <li>1b
    <ol>
      <li>3a
    <ol>
      <li>5a</li>
      <li>5b</li>
    </ol>
  </li>
  <li>2b
    <ol>
      <li>6a</li>
      <li>6b</li>
    </ol>
  </li>
</ol>

嵌套项需要切换可见性，这可以通过 JQuery 和 display:none DIV 来完成，但是有没有办法避免 DIV？除非每个列出的项目都自动放置在 DIV 中，否则键太大而无法使用“1a”、“1b”进行编号。

JQuery 切换：

<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>

随附的 CSS：

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

我需要什么样的 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>

已询问有关嵌套列表或更改编号样式的问题，但我找不到具有这种非重复编号和切换选项的问题。见-Nested ordered lists和Slide Toggle nested ordered list

Answer 1

我需要哪种 JQuery 和 CSS 反击组合才能让嵌套项目从中断的地方重新开始编号，而不是重新开始？

CSS counters 无法做到这一点。

您可以在新的嵌套级别上将它们重置为零，从而确定它们的范围 - 但它们不是连续的 (Demo)。您只能将它们初始化一次，但不会为更高级别的项目重置它们 (Demo)。有了类似的东西，您甚至可以根据需要枚举第一个和最里面的项目 - 但仍然不能用于 b 项目 (Demo)。

如果您知道每个列表正好有 2 个孩子并且您的深度是固定的，那么只有可能做一些聪明的计数器数学 - 我想您也需要为每个级别设置一个单独的计数器。确实有可能：

/* The counter styles only - no list styles, not the ab-counter
Should be coded in SASS/LESS, it's no fun to do by hand :-)
Here are the rules, on an example with 4 levels max: */


/* each ol increases the counters for its and lower levels */
         ol { counter-increment: level0 level1 level2 level3; }
      ol ol { counter-increment:        level1 level2 level3; }
   ol ol ol { counter-increment:               level2 level3; }
ol ol ol ol { counter-increment:                      level3; }

/* the ol in the last list item of a level should also advance the above level
   by the number of ols inside its parent list */
      li:last-child > ol { counter-increment: level0 14 level1 level2 level3; }
   li li:last-child > ol { counter-increment: level1 6         level2 level3; }
li li li:last-child > ol { counter-increment: level2 2                level3; }
/*                                                   ^
            The number can be computed as 2 ^ (max - level) - 2
              in here: 14 = 2^4-2; 6 = 2^3-2; 2 = 2^2-2
   The extra rule on the first level can actually be omitted */

/* And each li should use the counter for its level */
         li:before { content: counter(level0)" "; }
      li li:before { content: counter(level1)" "; }
   li li li:before { content: counter(level2)" "; }
li li li li:before { content: counter(level3)" "; }

(Demo for 3 levels, Demo for 4 levels)

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

您可以将列表样式类型作为第二个参数传递给计数器函数 (spec)：

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