CSS_CSS/HTMLでツリーディレクトリを作成するチュートリアル

この記事では、CSSを使ってオブジェクトの「表示」「非表示」属性を便利に制御し、ツリーディレクトリを作成する方法を詳しく紹介します。その方法は簡単です。コードは比較的単純なので、必要なときに作成できるように、書き出してネチズンと共有しました。

Suoyi 電子雑誌のほとんどはツリー ディレクトリを使用します。メイン ディレクトリをマウスでクリックするとサブディレクトリが展開され、メイン ディレクトリを再度クリックするとサブディレクトリが閉じます。シンプルで活気があり、気取らないように見えます。

この種のツリー状のディレクトリを作成するには、さまざまな方法があります。最近、私は最初に次の例を確認しました。マウスでメイン ディレクトリをクリックすると、対応するサブディレクトリがプルダウンされます。もう一度クリックすると元の状態に戻り、Soyi 電子雑誌のカタログ効果とまったく同じになります。

生成方法:
まず、次のようにこの効果を生成するコードをコピーし、次にそのコードを結合して生成方法を説明します:

+ メインディレクトリ 1

- サブディレクトリ 1

- サブディレクトリ 2

- サブディレクトリ 3

- サブディレクトリ 4

+メインディレクトリ 2 〈/div〉

- サブディレクトリ 1

- サブディレクトリ 2

- サブディレクトリ 3

注: " " は文字スペースを表します
1. まず 2 つの DIV を定義します。1 つはメイン ディレクトリ用です。対応するサブディレクトリのもう一方には child1 という名前を付けます。 2. main1 の DIV に「+ Main Directory 1」と書き込み、マウス クリック イベント (onclick) と小さな Javascript プログラム (document.all.child1.style.display= (document.all. child1.style. display ==''none'')?'''':''none''。このプログラムの機能は、main1 の DIV (つまり、「+ Main Directory 1」) をクリックすると、child1 の DIV が非表示の場合は表示し、表示されている場合は表示します。隠れた。 。
3. child1 の DIV にサブディレクトリを記述し、ハイパーリンクとして設定します。実際の運用では、リンクを指すように空のリンクを設定しました。ターゲット。 CSS: style="display:none" を child1 の DIV 定義に追加します。その目的は、最初にサブディレクトリを非表示にすることです。
他のディレクトリを作成するには、上記の 3 つの手順を繰り返すだけです。 F12 を押して効果を確認します。このメソッドは主にCSSのdisplay属性であるdisplayを利用する方法で、オブジェクトを非表示にするとそのオブジェクトが占有していたページスペースが自動的に解放されるのが特徴です。 CSS には別の属性があることがわかっています。可視性にはオブジェクトを表示および非表示にする機能もありますが、上記のツリー状のディレクトリの作成には使用できません。 Visibility によってオブジェクトが非表示になった後、オブジェクトが占めていたスペースは解放されないため、サブディレクトリが非表示になると、サブディレクトリの場所は空白になるだけで、位置は解放されないため、別のメイン ディレクトリを近づけることはできません。したがって、ページ要素の位置を固定する必要がある場合にのみ使用できます。