HTMLのUL,LIに行番号を付ける

HTMLのUL,LIで階層構造を表現できます

また、javascriptを使って階層構造を閉じたり、開いたりできます

階層1
　階層1-1
　　階層1-1-1
　階層1-2
階層2

この機能はよく紹介されています

この開閉機能を残したまま
行番号付けたいと思います

開いている場合
1　階層1
2　　階層1-1
3　　　階層1-1-1
4　　階層1-2
5　階層2


閉じている場合Ａ
1　階層1
2　　階層1-1
4　　階層1-2
5　階層2

閉じている場合Ｂ
1　階層1
5　階層2

行番号は左寄せです

このように行番号を付けるプログラムを紹介している

サイトがあったら教えてください

よろしく、お願いします

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/11/24 16:45

<ul>

　<li>トップ</li>
　<li>書籍
　　　<ul>
　　　　<li>書籍A</li>
　　　　<li>書籍B</li>
　　　</ul>
　</li>
　<li>製品
　　　<ul>
　　　　<li>工具</li>
　　　　<li>工具2</li>
　　　</ul>
　</li>
</ul>
ul li:before{content:counter(chapter);position:bsolute;}
ul li ul li:fter{content:"(項目" counter(section)"-" countersub ")";}
とか・・
　開閉も含めて、スタイルシートで行なうほうが簡単です。

　1 トップ(項目1)
　2 書籍A(項目2)
　5 製品B(項目3)
開く
　1 トップ(項目1)
　2 書籍(項目2)
　3 　書籍A(項目2-1)
　4　 書籍B(項目2-2)
　5 製品(項目3)

　⇒'content'( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
beforeおよび:after疑似要素( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

この回答への補足

ありがとうございます

参照したページから

LI:before { content: counter(item) ". "; counter-increment: item }

の一文を引用しましたが、適用すると、番号は

1. トップ
1. 書籍
　2. 書籍A
　3. 書籍B
1. 製品
　2. 工具
　3. 工具2

のように、ＵＬの場所でリセットされます

UL { counter-reset: item }
LI:before { content: counter(item) ". "; counter-increment: item }

の二文を適用すると、番号は

1. トップ
2. 書籍
　1. 書籍A
　2. 書籍B
3. 製品
　1. 工具
　2. 工具2

のようになります

すべて連番にしたいので、

最初の例のように、一文を適用するだけでＬＩをカウントしてくれそうなのですが

なにか足りないのでしょうか

UL LI:before { content: counter(item) ". "; counter-increment: item }

と頭にＵＬを付けても最初の例と同じでした

よろしく、お願いします

補足日時：2014/11/24 19:27

No.1 回答者： AsarKingChang 回答日時： 2014/11/24 14:39

それほど、難しくはないように感じます。

1　階層1　　　　A
2　　階層1-1　　　B
3　　　階層1-1-1
4　　階層1-2
5　階層2

AとBの位置に、クリックすると、
visibility:hidden;
visibility:visible;
が交互に切り替わるようにCSSを挿入すればよいだけに見えます。

意味が違ったらすいません。