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