[ 勉強 ] 超簡単!シンプルなアコーディオンメニュー

人様のソースコードを読み解くコーナー、第2弾です。

今回は、前回と同様、クリックで動作し、簡単に実装できる、アコーディオンメニューを選んでみました。

Java Script

$(function(){
   $("#acMenu dt").on("click", function() {
      $(this).next().slideToggle();
   });
});

すごい簡単なソースコードですね!でも、やはり、前回同様、連続でクリックしたら延々とアニメーションが実行されてしまうので、無駄にアニメーションを繰り返させないように、:not(:animated)を入れてみたいと思います。

が、しかし、意外にも単純にはいきませんでした。

ここで問題なのは、:not(:animated)の動作をするのは、#acMenu dt dd、です。

上記の場合、$(this).next()、という表記で#acMenu dt dd(正確に言えば、dtの兄弟要素関係で、かつ、次の要素であるddだけ)を表しているのですが、:not(:animated)はセレクタに付加するものであり、next()はメソッドなので、$(this).next():not(‘:animated’)、と言ったような書き方はできません。うーむ。困りました。

しかし、調べてみたところ、next()は引数にセレクタを持つことができるので、

$(function(){
   $('#acMenu dt').on('click', function() {
      $(this).next('dd:not(:animated)').slideToggle();
   });
});

という書き方をすればOKでした!

余談ですが、next()が使えないなら、隣接セレクタを使えばよいんじゃない、と思ったので、こういう書き方をしてみました。

Java Script

$(function(){
   $('#acMenu dt').on('click', function() {
      $('+dd:not(:animated)', this).slideToggle();
   });
});

あと、普通、隣接セレクタって、dt +dd、という書き方をするのに、$(this)の隣接セレクタは、$(‘+dd’, this)、という書き方をするのか謎だったのですが、これはjQueryの決まった記法で、『this(dt)の内容に対して、隣接するddを抽出する』という意味らしい。

で、thisの部分は省略もできて、その場合は、対称はdocumentになるとのことです。つまり、普段見慣れている、$(‘div’)、というのは、document中にあるdivを抽出する、ってことですね。

あと、気になるのが、.onメソッド。普通なら、$(‘#acMenu dt’).click(function () {…}、で良さそうなものですが、この2つの違いって何だろう?

Java Script

$(function(){
   $('#acMenu dt').click(function() {
      $('+dd:not(:animated)', this).slideToggle();
   });
});

調べてみたら、.onメソッドは、jQueryのバージョン1.7で新登場したようで、.bind()、.live()、.delegate()といったイベントAPIをまとめた機能をもったメソッドのようなのですが、つまりは、bind()メソッドとか、.live()メソッド、.delegate()を理解していないと、.onメソッドも理解できないということであり、今回は時間がないので、またいつか先に.bind()メソッドなどを勉強してから、.onメソッドを勉強したいと思います。今は、とりあえずこう書くよ!、ってことだけ覚えておきます。