jQuery で作る簡単でシンプルなアコーディオンメニュー

jQuery

jQuery でアコーディオンメニューを作ってみました。
某参考書を元に作ったのですが、人によって書き方は色々あるというのを教えてもらった感じです。
できるだけ簡単でシンプルな書き方にしてみたつもりなので、参考にして頂けると幸いです。

1、jQuery を読込む

まずはこれをしないとはじまりません。

2、HTMLを書く

とりあえずこんな感じで。

3、CSSを書く

お好みで背景色・文字色等、調整してください。

ol ,ul{
    list-style:none;
}
#menu{
    width:200px;
    margin:20px 0 0 20px;
}
.archive{
    background:#369;
    color:#FFF;
    padding:5px 10px;
    border-bottom:1px solid #FFF;
    cursor:pointer;
}
.subMenu li{
    background-color:#9CF;
    padding:5px 10px;
    border-bottom:1px solid #FFF;
}

4、Javascriptを書く

ほんの数行です。

$(function(){
    $('.subMenu').hide();
    //
    $('#menu .archive').click(function(e){
        $('+ul.subMenu',this).slideToggle();
    });
});

出来上がりです。

ポイント

$('+ul.subMenu',this)

の部分。
$(‘+ul.subMenu’,this)でクリックした要素の兄弟要素そ指定する事ができるようです。
この書き方を知っておくだけで色んな事が、簡単にかけるようになると思います。

5-1、デモ1

こんな感じになります。

5-2、デモ2

javascriptを下記にようにするともう少し凝った物ができます。

$(function(){
    $('.subMenu').hide();
    //
    $('#menu .archive').click(function(e){
        $('ul.subMenu').slideUp();
        if($('+ul.subMenu',this).css('display') == 'none'){
            $('+ul.subMenu',this).slideDown();
        }
    });
    //
});


以上です。
javascript自体はシンプルなので、汎用性が聞くと思います。
是非参考にしてみてください。

タイトルとURLをコピーしました