もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第3回 アコーディオンパネルの実装

この記事を読むのに必要な時間:およそ 4 分

jQueryを利用してナビゲーションを実装する

第3回・4回はナビゲーションの実装について説明していきます。今回はアコーディオンパネルと呼ばれるナビゲーションに注目して,プラグインを使わずに作成してみましょう。

本連載では,タイトル部分をクリックやホバーなどのトリガーによって,その下の閉じられていた要素(弟要素)をスライドアニメーションなどで開くようなものをアコーディオンパネルとします。

今回の記事で使うメソッドの紹介と簡単な説明

本題に入る前に,まずはアコーディオンパネルを実装するにあたって必要になるメソッドを紹介しておきます。メソッドとは$(セレクタ)で得られたjQueryオブジェクト(要素)に対して,$().method()のように実行する「method()」の部分を指します。以下method()やmethodメソッドなどと表記していますが,同じ意味です。

click()

clickメソッドは対象のjQueryオブジェクトのclickイベントに任意の関数をbindしていくメソッドです。clickメソッド内では$(this)でイベントを追加するjQueryオブジェクトを指定できます。また,text()で,対象のjQueryオブジェクトに含まれる文字列を得ることができるので,button要素をクリックするとconsoleには「sample button」と表示されることになります。

click() - HTML

<button id='sample1'>sample button</button>

click() - JS

$(function(){
    $('#sample1').click(function(){
        console.log($(this).text());
    });
});
next()

nextメソッドは対象のjQueryオブジェクトの弟要素(次の要素)を得るメソッドです。

next() - HTML

<dl>
    <dt>兄要素</dt>
    <dd>弟要素</dd>
</dl>

next() - JS

$(function(){
    console.log($('dt').next());
});

next() - 実行結果(console)

next() - 実行結果(console)

show(),hide(),is()

show,hideメソッドは対象のjQueryオブジェクトの表示非表示を切り替えるメソッドです。また,isメソッドは指定したセレクタに合う要素を選択します。ここでは上で紹介したメソッドと組み合わせたサンプルを用意してみました。

show(), hide(), is() - HTML

<dl id="sample2">
    <dt>ここをクリック</dt>
    <dd>ここの表示非表示が切り替わる</dd>
</dl>

show(), hide(), is() - JS

$(function(){
    $('dt','#sample2').click(function(){
        var next = $(this).next();
        // nextメソッドで次の要素を得たものにをnextで参照する
        if(next.is(':visible')){
        // 前回説明した:visibleセレクタを利用して状態を見る
        // nextが:visible,つまり表示されているなら非表示に
            next.hide();
        }else{
        // nextが:visibleでなければ,つまり非表示なら表示する
            next.show();
        }
    });
});

お気づきの方もいるかもしれませんが,上記のサンプルがまさにアコーディオンパネルになっています。初期状態でDD要素を非表示にしたい場合は,hide()を使います。

DDを非表示 - JS

$(function(){
    $('dd','#sample3').hide();
    // DD要素を非表示にする
    $('dt','#sample3').click(function(){
        var next = $(this).next();
        if(next.is(':visible')){
            next.hide();
        }else{
            next.show();
        }
    });
});

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/

コメント

  • 最後の実践サンプルについて

    どうみても
    $('h2','#sample4')
    じゃないと動かないですよね。

    1年近くも返信がないなんて・・・。

    Commented : #2  とおりすがり (2010/09/28, 14:23)

  • 最後の実践サンプルについて

    興味深く拝見しております。
    第3回の最後の実践サンプルについて、$('h2','#sample3')でも動作するのでしょうか?

    Commented : #1  ゆきや (2009/11/14, 12:56)

コメントの記入