お題の復習

まずは前回出したお題を復習しましょう。前回のお題は以下のような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();
    }
);

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