ul 要素と li 要素で構成されたナビゲーションの折りたたみを実現するための JavaScript です。
以下のような HTML タグが組まれている場合に、折りたたみを実現することを考えます。「大項目」をクリックすれば「中項目」が現れ、現れた「中項目」をクリックすれば「小項目」のリストが表示される、とします。
<ul>
<li><a href="#">大項目</a>
<ul>
<li><a href="#">中項目</a>
<ul>
<li><a href="#">小項目1</a></li>
<li><a href="#">小項目2</a></li>
<li><a href="#">小項目3</a></li>
<li><a href="#">小項目4</a></li>
<li><a href="#">小項目5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
a 要素をクリックした場合に、親要素の li が内包している ul が展開されればよい、と考えることができます。
あんまり美しくないけど、以下のように書いたとします。
var ulShowHide = {
showHide: function(element) {
if (element.parentNode.childNodes.item(2)) {
if (element.parentNode.childNodes.item(2).nodeName == 'UL') {
var styleDisplay = element.parentNode.childNodes.item(2).style.display;
if (styleDisplay == 'block' || styleDisplay == '') {
element.parentNode.childNodes.item(2).style.display = "none";
} else {
element.parentNode.childNodes.item(2).style.display = "block";
}
}
}
return false;
}
}
a 要素に onclick 属性として ulShowHide.showHide(this);return false; を追加します。return: false を追加するのは、IE で a 要素がクリックされた場合に、表示がページの一番上に戻ってしまうのを防ぐためです。
<ul>
<li><a href="#" onclick="ulShowHide.showHide(this);return false;">大項目</a>
<ul style="display: none;">
<li><a href="#" onclick="ulShowHide.showHide(this);return false;">中項目</a>
<ul style="display: none;">
<li><a href="#">小項目1</a></li>
<li><a href="#">小項目2</a></li>
<li><a href="#">小項目3</a></li>
<li><a href="#">小項目4</a></li>
<li><a href="#">小項目5</a></li>
</ul>
</li>
</ul>
</li>
</ul>
以下のリンクからサンプルをダウンロードできます。各ファイルの格納についてはおれ基準になっていますがご了承ください。
例えばカテゴリ名をクリックすると、そのカテゴリに属するブログ記事を表示するような折りたたみを実現する場合は、以下のようにテンプレートを記述します。
<MTTopLevelCategories>
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<li><a href="#" onclick="javascript:ulShowHide.showHide(this);return false;"><$MTCategoryLabel$></a>
<MTIfNonZero tag="MTCategoryCount">
<ul style="display: none;">
<MTEntries>
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</MTIfNonZero>
<$MTSubCatsRecurse$></li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTTopLevelCategories>
Comments