IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【見本あり】簡単1行!階層リストを開閉式リストにする【jQueryPlugin】| listfolding.js

Photo by Maya Karmon on Unsplash

Photo by Maya Karmon on Unsplash

投稿日: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
    1. list3-1
    2. list3-2
    3. list3-2-1
    4. list3-2-2
      • list3-2-2-1

折りたたみ機能あり

  • list1
    • list1-1
    • list1-2
    • list1-3
  • list2
  • list3
    1. list3-1
    2. list3-2
    3. list3-2-1
    4. list3-2-2
      • list3-2-2-1

</>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
    1. list3-1
    2. list3-2
    3. list3-2-1
    4. list3-2-2
      • list3-2-2-1

 

 

 

<!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>

 

 

 

はてなブログのカスタマイズ情報はコチラ!

www.it-the-best.com

 

更新情報

・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を追加する方式に変更。