投稿日:2019-08-05
たった一行でHTMLの多階層リストをクリックで開閉可能にする【jQueryPlugin】
HTML-JavaScript(JS)-jQueryプラグイン
jQueryとプラグインファイル
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.it-the-best.com/jquery/plugin/listfolding/3.3/listfolding.js"></script>
<script src="https://cdn.it-the-best.com/jquery/plugin/listfolding/4.0/listfolding.min.js"></script>
jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best
DEMO
折りたたみ機能無し
- list1
- list1-1
- list1-2
- list1-3
- list2
- list3
- list3-1
- list3-2
折りたたみ機能あり
- list1
- list1-1
- list1-2
- list1-3
- list2
- list3
- list3-1
- list3-2
</>HTML
<ul>
<li>list1
<ul>
<li>list1-1</li>
<li>list1-2</li>
<li>list1-3</li>
</ul>
</li>
<li>list2</li>
<li>list3
<ol>
<li>list3-1</li>
<li>list3-2
<menu>
<li>list3-2-1</li>
<li>list3-2-2
<ul>
<li>list3-2-2-1</li>
</ul>
</li>
</menu>
</li>
</ol>
</li>
</ul>
使用方法
「HTMLUListElement」には入れ子になったリスト(階層リスト)のトップリスト(最上位)を指定します。
「ul」,「ol」,「menu」それぞれに対応しています。
$(HTMLUListElement).set_listFolding();
オプション
1.強調表示 : set_listFolding( { "hover" : "true" } )
マウスオーバ(マウスの重なり)で透明度を変えるオプションになります。引数に「 {"hover":"true"} 」を指定します。("true"はtrueでも可能)
開閉可能なリストをわかりやすくするために閉じている階層リストだけが強調表示されます。
$(HTMLUListElement).set_listFolding({ "hover" : "true" });
- list1
- list1-1
- list1-2
- list1-3
- list2
- list3
- list3-1
- list3-2
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>listFolding Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.it-the-best.com/jquery/plugin/listfolding/3.3/listfolding.js"></script>
</head>
<body>
<ol class="sample-list">
<li>list1
<ul>
<li>list1-1</li>
</ul>
</li>
<li>list2
<menu>
<li>list2-1</li>
</menu>
</li>
</ol>
<script>
$(".sample-list").set_listFolding({"hover":true});
</script>
</body>
</html>
はてなブログのカスタマイズ情報はコチラ!
更新情報
・2019-08-25
https://cdn.it-the-best.com/jquery/plugin/listfolding/4.0/listfolding.min.jsを公開。(圧縮版)
https://cdn.it-the-best.com/jquery/plugin/listfolding/4.0/listfolding.jsを公開。
主な変更
要素にスタイルを直接設定するのでなく、CSSを追加する方式に変更。