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

投稿日：2019-08-05

たった一行でHTMLの多階層リストをクリックで開閉可能にする【jQueryPlugin】

HTML-JavaScript(JS)-jQueryプラグイン

jQueryとプラグインファイル
DEMO
使用方法
- オプション
例
更新情報

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
  list3-2-1
  list3-2-2
  - list3-2-2-1

折りたたみ機能あり

list1
- list1-1
- list1-2
- list1-3
list2
list3
1. list3-1
2. list3-2
  list3-2-1
  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
  list3-2-1
  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>