上下に展開・格納するナビ

拙サイトのナビを上下に展開・格納するようにしたいと思い色々物色。すると、『Web制作の現場で使う jQueryデザイン入門』p.244〜p.245の「サンプル1」に応用できそうなjQueryを見つけ拝借。

$(function(){
 $("展開・格納する要素名orクラス名orID名").hide();
 $("クリックする要素名orクラス名orID名").hover(function(){
  $("展開・格納する要素名orクラス名orID名:not(:animated)",this).slideDown("slow");
 },
 function(){
  $("展開・格納する要素名orクラス名orID名",this).slideUp("slow");
 });
});

これを元に、

1. クリック時の動作用に変更。
2. 自分が後で理解しやすいようにする。
3. 上下展開・格納動作にアニメーションをつけたい。
4. クリックする箇所が、展開・格納で文字色が変わるように。
5. 上述動作が2箇所で交互に動作するように。

となるように改造していく。

1.クリック時の動作用に変更〜2.自分が後で理解しやすいようにする

• 「hover」を「click」に変更。
• clickするごとに展開・格納させるので、slideDown()、slideUp()はslideToggle()にまとめて条件式の1つを削除。
• 「this」の意味が良く分かってないので現段階で取っちゃう（後で、冗長的になるけど、これがなくても良い書き方にする）。

3.上下展開・格納動作にアニメーションをつけたい

今まさに必要なコラムを発見。
＠ITの記事『jQueryのアコーディオン効果の使い方・作り方（2/3）』より、

コラム　「jQueryのslideDown/slideUp/fadeIn/fadeOutメソッドの正体」

slideDown/slideUpメソッドはheightプロパティを、fadeIn/fadeOutメソッドはopacityプロパティを、書き換えることにより実装します。jQueryは、これらのプロパティを書き換えるのに、animateメソッドを使用しています。つまり、slideDown/slideUp/fadeIn/fadeOutの正体は、animateだったのです。

animate({height: 'show'});    // slideDown
animate({height: 'hide'});     // slideUp
animate({height: 'toggle'});   // slideToggle
animate({opacity: 'show'});   // fadeIn
animate({opacity: 'hide'});    // fadeOut
animate({opacity: 'toggle'});  // fadeToggle（未サポート）

これで、slideToggle()をanimate()に差替え出来て、animate()のeasingが使えるように。

---

以上、1〜3までを踏まえた結果。

$(function(){
 $("展開・格納する要素名orクラス名orID名").hide();
 $("クリックする要素名orクラス名orID名").click(function(){
  $("展開・格納する要素名orクラス名orID名:not(:animated)").animate({height: 'toggle'}, 動作時間,'easing名');
 });
});

4.クリックする箇所が、展開・格納で文字色が変わるように

新たにtoggleClass("色指定用CSSクラス名")を使って、新たに色指定用CSSクラスが要素に無ければ追加し、あれば削除することで文字色を変更する。

$(function(){
 $("展開・格納する要素名orクラス名orID名").hide();
 $("クリックする要素名orクラス名orID名").click(function(){
  $("クリックする要素名orクラス名orID名").toggleClass("色指定用CSSクラス名");
  $("展開・格納する要素名orクラス名orID名:not(:animated)").animate({height: 'toggle'}, 動作時間,'easing名');
 });
});

5.上述動作が2箇所で交互に動作するように

さてここでヒジョ〜に悩む。元来プログラミングが不得手なのでどうしたら良いのか四苦八苦した結果、なんとか完成。
「展開・格納する要素名orクラス名orID名」や「クリックする要素名orクラス名orID名」では判りにくいので以下のようにした。

• 「展開・格納する要素名orクラス名orID名」は2つなので、各々ID名「#subnavi01」「#subnavi02」とする。
• 「クリックする要素名orクラス名orID名」も2つなので、各々ID名「#click01」「#click02」とする。

$(function(){
 $("#subnavi01, #subnavi02").hide();
 $("#click01").click(function(){
  $("#click01").toggleClass("色指定用CSSクラス名");
  $("#subnavi01:not(:animated)").animate({height: 'toggle'}, 動作時間,'easing名');
  $("#subnavi02").animate({height: 'hide'}, 動作時間,'easing名');
  $("#click02").removeClass("色指定用CSSクラス名");
 });
 $("#click02").click(function(){
  $("#click02").toggleClass("色指定用CSSクラス名");
  $("#subnavi02:not(:animated)").animate({height: 'toggle'}, 動作時間,'easing名');
  $("#subnavi01").animate({height: 'hide'}, 動作時間,'easing名');
  $("#click01").removeClass("色指定用CSSクラス名");
 });
});

要は上記青い部分。
「#click01」をクリックした時、「#subnavi01」は展開・格納し「#subnavi02」は必ず閉じている状態且つ元の文字色にしたいので。元の文字色にするのはremoveClass("色指定用CSSクラス名")で色指定用CSSクラスを削除することで対応。「#click02」をクリックした時は上記赤い部分で同じように作動する。

---

で、結局4はやめてしまった（つまりはtoggleClass()とremoveClass()の行は削除）。hover時の色変え設定と当たってしまって上手く動作せず、hover時の色変えを優先したので。それから、easingは一寸ギミックちっくなモノを選んでみた。

どのように動作するかは、拙サイトをご覧あれ。

---