5

を使用して、ネストされた関連トピック/サブトピックのセットがあります<ol>。私がこれまで持っている CSS は、ツリーの一番上からうまく機能しますが、ユーザーはサブトピックをクリックすることができ<ol>ます。ユーザーがクリックした場所から、入れ子になった のセットを再描画しています。私の問題は、章番号などを尊重する必要があることです。

したがって、典型的な構造がこれである場合：

Vehicles
  1. Automobile
    1.1 Street
      1.1.1 Sedan
      1.1.2 Coup
      1.1.3 Truck
    1.2 Race
      1.2.1 
  2. Rail
    2.1 Locomotive
    2.2 High Speed
    2.3 Uni

ユーザーが をクリックすると1.1 Street、次のように表示する必要があります。

1.1 Street
  1.1.1 Sedan
  1.1.2 Coup
  1.1.3 Truck

私がこれまでに持っているCSSはこれです：

ol li {display:block;}
ol > li:first-child {counter-reset: item;}
ol > li {counter-increment: item; position: relative;}
ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;}

秒カウンターでいくつかのバリエーションを試しましたが、ダイスはありません! この問題を複雑にしているのは、ツリーが無限に深くなる可能性があるため、ハードコードされたソリューションは存在しません。ありがとう！

4

1 に答える 1

1

リストを外側の<ol><li>ブロックでラップし、CSS を更新して、ネストされたコンテンツのカウンターを表示できます。

ol ol > li:before {content:counters(item, ".") ". "; position: absolute; margin-right: 100%; right: 10px;}

ここにデモがあります：

https://jsfiddle.net/q34wdw5p/

于 2016-05-15T05:24:36.840 に答える