html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、
今からjQueryを使ってみようと思っている方必見。
jQueryの便利な使い方をご紹介します。
jQueryを使ってみよう【導入編】でjQueryを使う為の準備は整ったので
今回からはjQueryの具体的な記述方法をご紹介します。
Contents
開閉式メニューを作ってみよう
開閉式メニュー（アコーディオンメニュー）は見出しを垂直方向に並べたリストで、見出しをクリックすることでそれに関連したコンテンツを出したり、見えなくしたりできるもののことです。
ユーザー自身がコンテンツをコントロールできる為、スマートフォン等表示領域が限られているデバイスでよく使われているのを見かけますね。
HTMLソース
<nav id="nav">
<h4>WEB制作</h4>
<ul>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/android/">android</a></li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/cms/">CMS</a>
<ul class="child">
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/cms/movale-type/">Movale Type</a></li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/cms/wordpress/">WordPress</a></li>
</ul>
</li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/css/">CSS</a></li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/facebook/">facebook</a></li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/iphone/">iPhone</a></li>
<li><a href="/blog/category/web%e5%88%b6%e4%bd%9c/javascript%ef%bc%88jquery%ef%bc%89/">javascript（jquery）</a></li>
</ul>
</nav>
Javascriptソース
<script>
$(document).ready(function(){
$('#nav > h4').click(function(){
$(this).next().slideToggle('slow');
});
});
</script>
slideToggleの引数には開閉する速度を指定します。
“slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。
例えば”1500″であれば、1.5秒かけてアニメーションが行われます。
省略された場合は、”normal”が用いられます。
サンプル
少しメニューっぽくCSSで装飾すれば開閉式メニューの完成です。