ドロップダウンメニューをjQueryで

ドロップダウンメニューは実装するのが簡単です！

命令は「mouseover・mouseout」とは違う、「hover」というものがでてきました。

記述の仕方はこんな感じです。

$ ( セレクタ ).hover(function(){

         マウスオーバー時の処理

},function(){

         マウスアウト時の処理

});

function()をカンマでつなげての記述は今まで登場してこなかったので、少々戸惑いました～。「hoverはこういうもの！」と覚えてしまおうと思います。

それと、孫メニューつき、多階層ドロップダウンメニューはcssと合わせて記述していきます。親メニューのaタグ、孫メニューのaタグをposition指定しての、slideDown()・slideUp()します。

ここまで、「実装するのが簡単」と言いましたが、実は自分でやってみて躓いたところがあります。「this」です！

実はここまでの章の間に「this」はなんとなく分っているつもりでした。

複数の要素があるとき、イベントを起こしたものに対してだけアクションを起こす、という感じです。

今回も確かにhoverした時のulタグを指定してあげるのに、

$( ' ul:not:(:animated) ', this ).slideDown(' fast ');

$( ' ul ', this ).slideUp(' fast ');

という記述が必要でした。でも、いざ自分で書いてみるとこの「this」を忘れがちです。。「this」がないだけで動いてくれないので、非常に大切です！

1章で「$(this)はイベントが発生した要素を取得できます」と書いてあります。そこをちゃんと頭に置いておいて、あとは何度も自分で試してみる、が良いかも…と思っています。