jQuery: 5行でできる。アコーディオンメニューの作り方

jQueryでアコーディオンメニューを作ります。
jQuery部分のコードは「$(function(){}」を含めて5行なので、 実質は3行です。シンプルなのでどなたでも簡単に取り入れることができると思います。
動作サンプル、サンプルコード、コード解説の順番で記述しています。

動作サンプル

サンプルを別ページで開く

HTML


<ul id="menu">
    <li>categoryA</li>
        <ul class="menu_children">
            <li><a href="#">menuA-1</a></li>
            <li><a href="#">menuA-2</a></li>
            <li><a href="#">menuA-3</a></li>
            <li><a href="#">menuA-4</a></li>
        </ul>
    <li>categoryB</li>
        <ul class="menu_children">
            <li><a href="#">menuB-1</a></li>
            <li><a href="#">menuB-2</a></li>
            <li><a href="#">menuB-3</a></li>
        </ul>
    <li>categoryC</li>
        <ul class="menu_children">
            <li><a href="#">menuC-1</a></li>
            <li><a href="#">menuC-2</a></li>
        </ul>
</ul>  <!-- end id="menu" -->

CSS


ul {
    margin-left: 0px;
    padding-left: 0px;
}
li {
    height: 28px;
    line-height: 28px;
    list-style-type: none;
}
/* 横幅 */
#menu {
    width: 200px;
}
#menu > li {
    border: 1px solid red;
    padding-left: 5px;
    background: linear-gradient(red,darkred);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='red', endColorstr='darkred', GradientType=0); /* IE7,8,9 */
    color: white;
    font-weight: bold;
    cursor: pointer;
}
/* 初期表示  非表示*/
.menu_children {
    display: none; 
}
.menu_children li {
    border: 1px solid silver;
    padding-left: 10px;
    background: floralwhite;
}
.menu_children li a {
    text-decoration: none;
}
/* マウスオーバー時 */
.menu_children li a:hover {
    text-decoration: underline;
}

JavaScript


$(function(){
    $('#menu > li').on('click', function(){
        $(this).next('ul').slideToggle('fast');
    });
});

コード解説

HTMLの構造


<ul id="menu">
    <li></li>
        <ul class="menu_children">
            <li></li>
        </ul>
    <li>/li>
        <ul class="menu_children">
            <li></li>
        </ul>
    <li></li>
        <ul class="menu_children">
            <li></li>
        </ul>
</ul>  <!-- end id="menu" -->

HTML側では、リストを入れ子構造にしています。上位のul要素にid="menu"、 下位のul要素にclass="menu_children"を付けています。

メニュー項目の表示・非表示


/* 初期表示  非表示*/
.menu_children {
    display: none; 
}
下位のul要素を非表示にするようにしています。 最初から下位のul要素を表示したい場合は、display: noneは不要です。

slideToggle()メソッドで開閉する


$('#menu > li').on('click', function(){
    $(this).next('ul').slideToggle('fast');
});

slideToggle()メソッドを使うと、slideUp()・slideDown()と分けて記述する必要がなく、 1行で開閉操作ができるので便利です。

$('#menu > li')

li要素は上位のul要素と下位のul要素それぞれにあります。 ここでは上位の#menuの子要素liのみを取得するために「 > 」が必要です。

$(this).next('ul')

thisは#menuのli要素です。next()メソッドを使って、li要素の次にあるul要素（下位のul要素）を取得しています。 next('ul')の'ul'はなくても大丈夫ですが、取得要素がわかるように記述しています。

jQuery入門