4/4 クリックで深い階層が現れるリストの作り方 [ホームページ作成] All About

ボタン1つで全リストを展開・縮小する

ボタン1つで全リストを展開・縮小するには、以下のようなJavaScriptソースをHTMLのhead要素内に記述しておきます。

<script type="text/javascript"><!--
function allshowhide( showhide ) {
   var TargetLabels = document.getElementsByClassName('menu');
   for (var i=0; i<TargetLabels.length; i++) {
      var TargetLists = TargetLabels[i].parentNode.getElementsByTagName('ul');
      TargetLists[0].style.display = showhide;
   }
}
// --></script>

この7行（scriptタグも含めると9行）で、全リストを展開・縮小できる「allshowhide」関数を作っています。特に書き換える必要なく、コピー＆ペーストで使えますが、以下に簡単に内容を説明しておきます（読み飛ばしても構いません）。

●var TargetLabels = document.getElementsByClassName('menu');
「getElementsByClassName('menu')」で、「class属性の値が『menu』である全要素」を得ています。「class属性の値が『menu』である」要素というのは、ここでは「下層を展開・縮小するためのリンク」のことです。

※getElementsByClassNameメソッドは、例えばIE6のような古いブラウザでは利用できません。その対策として、getElementsByNameメソッドを使ってname属性の値で判別する方法を採用したサンプルも用意しました（後述）。

●for (var i=0; i<TargetLabels.length; i++) { ～ }
得られた「class属性の値が『menu』である全要素」1つ1つに対して処理を実行するループです。「TargetLabels.length」で該当要素の個数を得ています。

●var TargetLists = TargetLabels[i].parentNode.getElementsByTagName('ul');
ここで、対象要素と同じ階層にあるリスト（ul要素）を得ています。リストをul要素ではなくol要素で作った場合は、上記の「ul」部分を「ol」に修正する必要があります。

●TargetLists[0].style.display = showhide;
そのリストのdisplayプロパティに、関数の引数として与えた値（showhide）を格納しています。「none」を与えれば非表示になりますし、「block」を与えれば（ブロックレベル要素として）表示されます。

JavaScriptを実行するボタンを作る

このallshowhide関数を呼び出すHTMLソースは以下の通りです。input要素を使ってボタンを2つ作っています。

<input type="button" value="全部閉じる" onclick="allshowhide('none');">
<input type="button" value="全部展開" onclick="allshowhide('block');">

呼び出すallshowhide関数に、引数として、

「none」を与えると、「リスト全部を非表示にする」（＝全部閉じる）ボタン
「block」を与えると、「リスト全部をブロックレベル要素として表示する」（＝全部展開する）ボタン

になります。

初期状態で最上位の階層のみを表示する

ページを読み込んだ直後は「すべてのリストが畳まれた状態」にし、最上位の階層のみが見えるようにしておくと操作しやすいでしょう。そうするには、HTMLのbody要素の末尾あたり（少なくとも、全リストを記述し終えた後の位置）に、以下のように記述しておきます。

<script type="text/javascript"><!--
allshowhide('none');
// --></script>

ここで実行しているJavaScriptは、先ほど作成した「全部閉じる」ボタンと同じ内容です。ページを最後まで読み込んだ時点で、リストを全部閉じる処理を実行させています。

実際に動かせるサンプル

これまでにご紹介してきたソースをすべて使ったサンプルを以下に用意しました。実際にブラウザで表示させてみて下さい。これらのサンプルページからソースをコピー＆ペーストすれば、楽に試せるでしょう。

リストを展開・縮小させる機能の部分は、どちらのサンプルでも同じです。ただ、すべてのリストを一括して展開・縮小させる機能の実現方法に違いがあります。

前者のサンプルAは、getElementsByClassNameメソッドを使用しているため、古いブラウザでは動きません。後者のサンプルBは、a要素にname属性を追記することで、getElementsByNameメソッドを使えるようにしており、IE6のような古いブラウザでも動きます。