Webデザインのツリーとは何ですか？単に置いて、リンクをクリックし、下部ディレクトリを展開し、クリックして結合します。これは最も単純なツリーです。それを実装する方法は？また非常に簡単です。 CSSにはプロパティディスプレイがあります。これはコンテンツの現実を制御できますが、それでも表示されません。次に、JSを介してCSSのプロパティを制御できます。次のコードを参照してください。
<div>トップディレクトリ</div>
<div id = menulist>
<div>メニュー1 </div>
<div>メニュー2 </div>
<div>メニュー3 </div>
</div>
これは、ツリーのプロトタイプと見なされます。もちろん、初期状態はCSSの表示属性を追加します。最も一般的に使用されるディスプレイ属性はなしであり、ブロック属性です。
ブロックはブロックタイプ要素のように表示されない一方で、何も表示されません。次に、コードを見てください
<div>トップディレクトリ</div>
<div id = menulist style = display：none>
<div>メニュー1 </div>
<div>メニュー2 </div>
<div>メニュー3 </div>
</div>
このようにして、ページを実行すると、トップレベルのディレクトリのみが表示されます。制御する場合は、JSコードを追加する必要があります。
1.最初にメニューリストを入手してください
var menulist = document.getElementbyid（menulist）;
2。または、このオブジェクトの後にCSSプロパティを制御できます
menulist.style.display = block;
判断を追加します
if（menulist.style.display = none）
menulist.style.display = block;
それ以外
menulist.style.display = none;
このように、最も元のツリーが生成され、最終コードが生成されます
<スクリプト>
関数showmenu（）
{
var menulist = document.getElementbyid（menulist）;
if（menulist.style.display ==なし）
menulist.style.display = block;
それ以外
menulist.style.display = none;
}
</script>
<div on
click = showmenu（）;> top directory </div>
<div id = menulist style = display：none>
<div>メニュー1 </div>
<div>メニュー2 </div>
<div>メニュー3 </div>
</div>
長い間、私はこの方法に従って属性ディレクトリを作成していました。ディレクトリをどんなに複雑にしても、この方法は試され、テストされています。次のスクリーンショットは、IEで作成した比較的複雑なツリーディレクトリの操作効果です。
ひどいことはクロムの下で起こり、それは完全に台無しにされました。いくつかの情報検索の後、私はついにその理由を見つけました。ブロックに加えて、Displayには他にも多くの属性があります。ブロックはブロックに表示されます。私はそれにテーブルに置かれました。神は、テーブルとブロックが深い憎しみを持っているかどうかを知っています。マイクロソフトは、それが彼らの憎しみを巧みに無視していると考えていましたが、クロムはまだ正直に基準に従いました。 Firefoxは同じなので、説明にはまだ問題があります。この問題を解決する方法：
ディスプレイにはプロパティテーブルセルもあります。これは、テーブルの形でコンテンツをレンダリングすることを意味します。これは、レイアウトのためにテーブルの使用とまったく合っています。以下は、3つのブラウザの互換性のあるレンダリングです。
IE6
Chrome2
Firefox3.5