jqueryファイルのツリー構造の書き方-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jqueryファイルのツリー構造の書き方

PHPz

May 28, 2023 am 11:34 AM

Web アプリケーションの開発では、アプリケーション内に視覚的な組織構造を表示する必要がよくあります。ファイル構造もその 1 つです。 jQuery ファイルツリー構造は、ファイルとフォルダーの階層構造を表示する非常に効率的な方法です。

次に、jQueryを使ってファイルツリー構造を作成する方法を紹介します。

jQuery ライブラリのインポート

まず、jQuery ライブラリファイルをインポートする必要があります。ページの head タグに次のコードを追加します。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

ログイン後にコピー

HTML スキーマの作成

次に、ファイルツリー構造を表示するための HTML スキーマを作成する必要があります。ファイルツリー階層を表示するための単純な div コンテナを作成します。

<div class="file-tree">
    <ul>
        <li><a href="#">Folder 1</a>
            <ul>
                <li><a href="#">Subfolder 1</a></li>
                <li><a href="#">Subfolder 2</a></li>
            </ul>
        </li>
        <li><a href="#">Folder 2</a></li>
        <li><a href="#">Folder 3</a>
            <ul>
                <li><a href="#">Subfolder 1</a></li>
            </ul>
        </li>
    </ul>
</div>

ログイン後にコピー

JavaScript コードの記述

次に、HTML 構造をファイルツリー構造に変換する jQuery コードを記述します。 jQuery の「each()」メソッドを使用して HTML 構造を反復処理し、ファイルツリー構造に変換します。

$(document).ready(function () {
    $(".file-tree ul").hide();
    $(".file-tree li").each(function () {
        if ($(this).children("ul").length > 0) {
            $(this).addClass("parent");
        }
    });
    $(".file-tree a").click(function () {
        var children = $(this).parent("li.parent").children("ul");
        if (children.is(":visible")) {
            children.hide();
        } else {
            children.show();
        }
    });
});

ログイン後にコピー

このコードでは、各 "li" 要素をループし、その子要素に "ul" 要素があるかどうかをチェックしています。存在する場合、それを親フォルダーとしてマークします。次に、フォルダーのすべてのサブディレクトリを非表示にし (「hide()」メソッドを呼び出して)、それらを表示するクリックイベントハンドラーをアタッチします (「show()」メソッドを呼び出して)。

スタイルデザイン

最後に、ファイルツリー構造をよりすっきりと美しく見せるために、いくつかの CSS スタイルが必要です。

.file-tree ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.file-tree ul {
    margin-left: 1em;
    position: relative;
}
.file-tree li.parent > a:before {
    content: "+ ";
}
.file-tree ul ul:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.5em;
    border-left: 1px solid #ccc;
}

ログイン後にコピー

この CSS コードは、ファイルツリー構造をより読みやすい視覚的なデザインに変換します。すべての順序なしリストとリスト項目のマージンとパディングをゼロに設定し、リスト項目内のすべての項目をマークなしに設定します。さらに、CSS 疑似要素として " " 記号を使用して親フォルダーを表し、実線の境界線を使用して子フォルダーを表します。

概要

jQuery を使用してファイルツリー構造を作成すると、複雑な階層を簡単に表示し、CSS スタイルを使用してその外観と動作をカスタマイズできます。 JavaScript と jQuery の習熟度が高まるにつれて、特定のニーズに合わせてより複雑なファイルツリー構造を作成することもできます。

以上がjqueryファイルのツリー構造の書き方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。