ツリー・チェックボックス
概要
チェックボックスをツリー状に並べ、複雑な操作と入れ子メニューを制御します。
（例）アンカーリンクとコンテンツの表示・非表示を制御
デザイン
サンプル
用途によって、テキストで✓をさせたり、リンクをさせたり変更してください。
<nav class="treeList">
<ul>
<li><label><input type="checkbox" data-node="1"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル１</button></li>
<li><label><input type="checkbox" data-node="1"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル２</button></li>
<li><label><input type="checkbox" data-node="1"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３</button>
<input type="button" value="" class="openerBtn" aria-expanded="false">
<ul hidden>
<li><label><input type="checkbox" data-node="2"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３ー１</button></li>
<li><label><input type="checkbox" data-node="2"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３ー２</button>
<input type="button" value="" class="openerBtn" aria-expanded="false">
<ul hidden>
<li><label><input type="checkbox" data-node="3"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３ー２ー１</button></li>
<li><label><input type="checkbox" data-node="3"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３ー２ー２</button></li>
<li><label><input type="checkbox" data-node="3"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３ー２ー３</button>
<input type="button" value="" class="openerBtn" aria-expanded="false">
<ul hidden>
<li><label><input type="checkbox" data-node="4"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３ー２ー３ー１</button></li>
<li><label><input type="checkbox" data-node="4"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３ー２ー３ー２</button></li>
</ul>
</li>
<li><label><input type="checkbox" data-node="3"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３ー２ー４</button></li>
</ul>
</li>
<li><label><input type="checkbox" data-node="2"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３ー３</button></li>
<li><label><input type="checkbox" data-node="2"><span class="inputCheck"></span></label><button type="button" class="textBlack">サンプル３ー４</button></li>
</ul>
</li>
</ul>
</nav>
- NAV
-
CLASS ナビゲーションタグ（NAV）に [treeList] を設置して、UL（チェックボックス）を階層化します。
- 階層
-
DATA属性 data-node="X" Xに、入れ子階層の数値を設定します。
- 階層
-
CLASS [openerBtn] は、入れ子を開閉するボタンです。サンプルの初期値では閉じていますが、Javascript内で変更できます。
改変対象ファイル
- CSS:
- _ul.scss 内に改変対象箇所があります。
_ul.scssは、本番へは反映せずに、必要なUIのコードを_modules.scssに追加してください。
- Javascript:
- タブの動作:treeCheckBox()関数
必要なUIのコードをライブラリー (/temp/js/tips.js) から本番 (/common/js/tips.js) に追加してください。