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

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 中，否则 key 太大而无法用“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

What mix of JQuery and CSS countering do I need to get the nested items to pick up numbering where it left off, not restart it?

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 )

How can I adapt the counter CSS to add letters, not decimal numbers?

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

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