開閉式のメニューを作る
よくある開閉するメニュー(リファレンス
TOPでもやってます)の実装は、
slideToggle()を使えば簡単に出来ます。
例えばこのサイトの左側に出ているメニューでは
[HTMLソース]
<div id="navi">
:
<h4>API</h4>
<ul class="sub">
<li><a href="/jquery/api/core/">Core</a></li>
<li><a href="/jquery/api/selectors/">Selectors</a></li>
<li><a href="/jquery/api/attributes/">Attributes</a></li>
<li><a href="/jquery/api/traversing/">Traversing</a></li>
<li><a href="/jquery/api/manipulation/">Manipulation</a></li>
<li><a href="/jquery/api/css/">CSS</a></li>
<li><a href="/jquery/api/events/">Events</a></li>
<li><a href="/jquery/api/effects/">Effects</a></li>
<li><a href="/jquery/api/ajax/">Ajax</a></li>
<li><a href="/jquery/api/utilities/">Utilities</a></li>
</ul>
:
</div>
[Javascriptソース]
<script><!--
$(document).ready(function(){
$('#navi > h4').click(function(){
// 引数には開閉する速度を指定します
$(this).next().slideToggle('slow');
});
});
//-->
</script>
とこのようになります。
ここでは、HTMLの構造上「h4の次のブロックを開閉する」としているのでこれで動作しますが、togglerの指定方法については実際のページでの構造にあわせることになるでしょう。