お題の復習
まずは前回出したお題を復習しましょう。前回のお題は以下のようなHTMLがあったときにマウスオーバーでサブメニューを表示するようなUIをjQueryを使って書くというものでした。
たくさんforkしていただいてありがとうございました。今回は回答編ということでみなさんにこのお題をforkしてもらった作品を紹介しながらjQueryを使ったマウスオーバーでのメニュー表示機能を解説していきます。やってみてわからなかった人は模範解答を参考にしてみてください。
模範解答
ではまず模範解答を見ていきましょう。他にもよくできていた作品はたくさんありましたが,
それではこの作品のコードを解説します。
まずmenuItemという要素にマウスオーバーしたときにサブメニューの表示を切り替えたいので,
$('.menuItem').hover(
function() {
// マウスオーバーの時の処理
},
function() {
// マウスアウトの時の処理
}
);
マウスオーバーの処理は,
$(this).find('.submenu').show();
$(this)がマウスオーバーされた自分自身を指すので,
$(this).find('.submenu').hide();
これを最初のコードに当てはめれば以下のようになり,
$('.menuItem').hover(
function() {
$(this).find('.submenu').show();
},
function() {
$(this).find('.submenu').hide();
}
);
他にも多少書き方は違いますが,