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以添加字母，而不是十进制数？

您可以将list-style-type作为第二个参数传递给计数器函数（spec）：

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

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

1 个答案: