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

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

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

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

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

ログイン後にコピー

HTML スキーマの作成

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

  Folder 1  Subfolder 1
 Subfolder 2
 
 
 Folder 2
 Folder 3  Subfolder 1

ログイン後にコピー

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 サイトの他の関連記事を参照してください。