IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

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

Photo by Maya Karmon on Unsplash

Photo by Maya Karmon on Unsplash

たった一行で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>

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