Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

W3C 仕様書用、『目次階層Nice.js』作って見た

W3C の仕様書の「目次の階層が深い & 枝が多い」 ので、全体像が把握しづらい。。そこで、階層構造を把握しやすいように、show/hide 出来るjsを書いてみました。

W3C全ての仕様書で試してはいませんが、幾つか試した所、問題なくいけました。ですので、恐らく←いけますw 目次が ul / ol で構成されており、目次のhtmlが特殊でなければ。。w

記事タイトルのネーミングがダサいのは、気にしないで下さい( ´・∀・` )w

f:id:DDramonQ:20170520214907p:plain

 

Demo

Demo

W3C specTable Toggle -Github-

 

 

導入手順

❶htmlファイルと同フォルダ*1 に specTableToggle.css, js を保存

 

f:id:DDramonQ:20170520213213p:plain

 

❷htmlファイル → ヘッダ : css, js ファイル を Import する為の記述

<link rel="stylesheet" href="specTableToggle.css">
<script src="specTableToggle.js"></script>

 

f:id:DDramonQ:20170520213232p:plain

 

❷htmlファイル → 目次の最上位階層 ul/ol にid付加

<ul id="tableOfContents">

 or

<ol id="tableOfContents">

f:id:DDramonQ:20170520213805p:plain

 

 

仕様書によって、目次の最上位要素が ul であったり ol であったりします。

そのに、 id="tableOfContents"を追加すればOK🌟

 

 

オプション

spec.hide()

●初めから、サブ階層を隠しておきたい場合は、

<script src="specTableToggle.js"></script>

以降に

<script>spec.hide()</script>

と記述。

f:id:DDramonQ:20170520213630p:plain

 

【見本】

spec.hide()...

❶無

f:id:DDramonQ:20170520213322p:plain

❷有

f:id:DDramonQ:20170520213347p:plain

 

 

 

階層の深さに関係なく、「liが子要素を持ち & その子要素が ul/ol 」であれば、<li>をクリックすれば、その子要素の ul/ol が "hide/ show" されます。

f:id:DDramonQ:20170520213555p:plain

 

 

*1:同じディレクトリ

Remove all ads
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️