3

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

有人询问了有关嵌套列表或更改编号样式的问题，但我找不到具有这种非重复编号和切换选项的问题。请参阅-嵌套有序列表和滑动切换嵌套有序列表

4

1 回答 1

3

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

CSS 计数器无法做到这一点。

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

（3级演示，4级演示）

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

您可以将 list-style-type 作为第二个参数传递给 counter 函数 ( spec )：

content: counter(level1) counter(level2, lower-latin) " ";
于 2013-06-04T16:39:36.697 回答