読んで覚える,触って体験!JavaScript&CSS3~gihyo.jp×jsdo.it presents

第3回 jQueryの基本(回答編)

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

お題の復習

まずは前回出したお題を復習しましょう。前回のお題は以下のようなHTMLがあったときにマウスオーバーでサブメニューを表示するようなUIをjQueryを使って書くというものでした。

たくさんforkしていただいてありがとうございました。今回は回答編ということでみなさんにこのお題をforkしてもらった作品を紹介しながらjQueryを使ったマウスオーバーでのメニュー表示機能を解説していきます。やってみてわからなかった人は模範解答を参考にしてみてください。

模範解答

ではまず模範解答を見ていきましょう。他にもよくできていた作品はたくさんありましたが,模範解答の例として以下の作品を紹介します。

それではこの作品のコードを解説します。

まずmenuItemという要素にマウスオーバーしたときにサブメニューの表示を切り替えたいので,hoverというマウスオーバーとマウスアウトの処理を同時に設定できるhoverを.menuItemに設定します。

$('.menuItem').hover(
    function() {
        // マウスオーバーの時の処理
    },
    function() {
        // マウスアウトの時の処理
    }
);

マウスオーバーの処理は,menuItemの子要素のsubmenuを表示にしたいので以下のように書きます。

$(this).find('.submenu').show();

$(this)がマウスオーバーされた自分自身を指すので,その子要素の.submenuをshow()で表示にすると言う意味です。マウスアウトのときはshowのところをhideにするだけです。

$(this).find('.submenu').hide();

これを最初のコードに当てはめれば以下のようになり,マウスオーバーでのサブメニューの機能は完成です。

$('.menuItem').hover(
    function() {
        $(this).find('.submenu').show();
    },
    function() {
        $(this).find('.submenu').hide();
    }
);

他にも多少書き方は違いますが,以下の作品も同じ動作をします。

著者プロフィール

外村和仁(ほかむらかずひと)

HTMLコーダー,JavaScriptプログラマ,PHP,Perlのプログラマといった職務を経験後,2010年に株式会社ピクセルグリッドに入社。大規模サイトの運用,開発の経験を活かしてバックエンドからフロントエンドまで幅広く担当。好きな言語はPythonとJavaScript。JavaScriptの勉強会,jstudyを主催している。

Twitter: @hokaccha

コメント

コメントの記入