■WebTech > ツリー式リスト構造にちょっと手を加えてみる。

さて、第三回はツリー式リスト構造についてちょっと話そうかと思います。
ツリー式リスト構造って言うのは、要するに

こんなやつです。ソースは

<ul>
　　<li>メインコンテンツ
　　　　<ul>
　　　　　　<li>プラモデル</li>
　　　　　　<li>レビュー</li>
　　　　</ul>
　　</li>
　　<li>サブコンテンツ
　　　　<ul>
　　　　　　<li>Perl</li>
　　　　　　<li>Web Tips</li>
　　</ul>
　　</li>
　　<li">フォーラム
　　　　<ul>
　　　　　　<li>掲示板</li>
　　　　　　<li>チャット</li>
　　　　</ul>
　　</li>
</ul>

こんなんなってます。
これに手を加えて、少し視覚的な変化を加えたいと思います。
JavaScriptと、CSSの「display」属性を利用して、関数setvisibleを定義します。
ソースはこのような感じ。

function setvisible(obj){
　　if(obj.style.display == "none"){
　　　　obj.style.display = "list-item";
　　} else {
　　　　obj.style.display = "none";
　　}
}

obj.style.displayの部分が、オブジェクトに対して、スタイルシートを参照/設定している部分です。
ソースはこのような感じ。

<ul>
　　<li><span onClick="setvisible(child1)">親要素１</span>
　　　　<ul id="child1">
　　　　　　<li>親要素１ - 子要素１</li>
　　　　　　<li>親要素１ - 子要素２</li>
　　　　</ul>
　　</li>
　　<li><span onClick="setvisible(child2)">親要素２</span>
　　　　<ul id="child2">
　　　　　　<li>親要素２ - 子要素１</li>
　　　　　　<li>親要素２ - 子要素２</li>
　　　　</ul>
　　</li>
　　<li><span onClick="setvisible(child3)">親要素３</span>
　　　　<ul id="child3">
　　　　　　<li>親要素３ - 子要素１</li>
　　　　　　<li>親要素３ - 子要素２</li>
　　　　</ul>
　　</li>
　　<li><span onClick="setvisible(child4)">親要素４</span>
　　　　<ul id="child4">
　　　　　　<li>親要素４ - 子要素１</li>
　　　　　　<li>親要素４ - 子要素２</li>
　　　　</ul>
　　</li>
</ul>

<li>タグにもonClickは指定できますが、子要素をクリックしてもツリーが閉じてしまうので、
それを無くすためにいったん<span>タグでくくって、子要素にonClickが適用されないようにしています。

サンプルはこちら。

≪戻る

ORE&HAMASEN WEB
Last Update:2007/07/17