HTML TIPS & TRICKS 2000/09
DOMとスタイルシートを制する

QUESTION 2　リストを展開せよ！

　こちらも一見見慣れたものですが、やはりDOMを使っています。 今度は文字ではなく、リスト項目の表示と非表示の切り替えです。最初は項目だけがリストとして表示されていますが、 クリックイベントによってさらに細かいリストが表示されます。

　やはり最初にDOMオブジェクトを取得しなければなりません。 すでに説明済みですので省略して次に行きます。

　表示と非表示の切り替えですが、今度はCSS1のdisplayプロパティを使用します。 今度はちゃんとした理由があります。visibilityプロパティは見えるかどうかを指定しますが、 displayプロパティは存在するかどうかを指定します。つまり、noneにするとそのエレメントはなかったことになるのです。 そのため、noneのときはdisplayプロパティの値の取得が出来ません。よって、この辺りの処理がポイントとなります。

　ではまずソースを見てください。

CSS定義の一部

　最初はメニューを閉じた常態にして置くので、すべてのIDに対して display:none にしておきます。 


/* 予め非表示にしておくエレメントのIDを列挙 */
#HTML, #CSS, #DOM, #XML, #XHTML
{
    display:none;
}

HTMLの一部

　サブメニューとなるULブロックには、すべてIDを割り振ってあります。onClickイベントのときにこのIDを関数に渡すことで処理を行います。 


<UL>
    <LI>
        <SPAN class="cap" onClick="oAndC('HTML');">HTML(Hypertext Markup Language)</SPAN>
        <UL id="HTML">
            <LI><A href="http://www.w3.org/TR/html401/">HTML 4.01 Specification</A></LI>
            <LI><A href="http://www.w3.org/TR/REC-html32.html">HTML 3.2 Reference Specification</A></LI>
            <LI><A href="http://www.w3.org/MarkUp/html-spec/">HTML 2.0 Materials</A></LI>
        </UL>
    </LI>
</UL>

JavaScript

　最初に引数で渡されたIDを元に、DOMオブジェクトの生成をします。そして、 そのオブジェクトのdisplayプロパティの値によって状態の切り替えを行います。この切り替えはトグルになるので、 ここでは三項演算子を使用しています。displayプロパティの値がNullかnoneであればblockに、 blockであればNull（none）にします。 このとき行末のNullの代わりにnoneを使うとエラーになります。また、条件式でNullかnoneの両方でtrueになるようになっているのは、 NN6で正しく判定されないための対策です。 


function oAndC(id)                          //イベントで呼び出される関数
{
    obj = document.getElementById(id);      //DOMオブジェクトを取得
    obj.style.display = (obj.style.display=="" || obj.style.display=="none")?"block":""
                                            //呼び出されるたびにblockとnoneを切り替える
}
三項演算子
　ifによるちょっとした分岐を1行で済ませることが出来ます。
var a = b==c?d:e;
　この文は次のifによる分岐と同じです。

var a;
if(b == c)
{
    a = d;
}
else
{
    a = e;
}
　つまり、次の形になっているわけです。
条件式 ? 条件がtrueの時の値 : 条件がfalseの時の値

トップページ