Monday, 3 June 2013

縦型メニュー展開・収納時(開閉時)にメニュー横の+−表示が切替るjQuery

今回の拙サイト全面改修の際追加したメニュー横の+−表示が切替るjQueryの詳説をば。
実際どのようなものかは、この拙ブログのサイドメニューも同じ仕様なのでご覧あれ。

メニュー右に「+」を追加して、メニュー展開時にこれが「−」に変わり、メニュー収納時にまた「+」になるようなメニュー展開・収納jQuery。この「+」「−」はいわば飾りなのでHTML上には書きたくない、しかしjQueryの特性上、CSSの疑似要素〔:after〕をセレクターとして呼べないこともあって、「+」「−」の切替え方に難儀。当初、〔toggle(fn1, fn2, ..., fnN)〕を使用しようと考えたがjQuery 1.9からこれが廃止されたことを知り愕然。(詳細はjQuery Core 1.9 Upgrade Guide | jQueryを参照)
他に手はないかと色々調べた結果、jQueryの〔after()〕と〔replaceWith()〕が使えそうと判断。〔after()〕は指定したセレクターの後ろにHTML文字列などを挿入するもの、〔replaceWith()〕は指定したセレクターのHTML文字列などを置換するもの。この2つを組み合わせて「+」「−」の切替えを可能にした。
以下に使用例を。
HTML
<ul>
 <li><span id="accordion02">works</span>
  <ul id="subNavi02">
   <li><a href="#">web design</a></li>
   <li><a href="#">web demo</a></li>
   <li><a href="#">print</a></li>
   <li><a href="#">letter carving</a></li>
  </ul>
 </li>
</ul>

jQuery
$(function(){
1:  $("#subNavi02").hide();
2:  $("#accordion02").after("+");
3:  $("#accordion02").click(function(){
4:  $("#subNavi02:not(:animated)").animate({height: 'show'}, 500,'easeOutQuad');
5:  $("#accordion02").next().replaceWith("–");
6:  $("#subNavi02:not(:animated)").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion02").next().replaceWith("+");});
 });
});
解説
  • 1: はじめはサブナビ部分を隠しておくための〔hide()〕
  • 2:「works」の右に「+」を追加するための〔after("+")〕
  • 3,4,5:「works」をクリックすると(3)、サブナビ部分が展開(4)、同時に「+」が「−」に置換される(5)
  • 6: もう一度「works」をクリックするとサブナビ部分は収納され、収納完了後に「−」が「+」に置換される

実はもう一つのミソが上記6の『収納完了後に「−」が「+」に置換』。4,5での書き方の場合はクリックと同時に置換されるが、4,6で使用している〔animate(params, [duration], [easing], [callback])〕(コレ自体の解説は以前のエントリ「上下に展開・格納するナビ」をご覧あれ)の〔[callback]〕部分に置換の関数〔function(){$("#accordion02").next().replaceWith("+");}〕を書き込むことで、収納完了後に置換がなされるようになる(らしい)。

以上だが、ここで1つ疑問が。
今回は1つの〔click()〕内に2つの〔animate()〕を挿入しているが、これで何故メニューの展開・収納が上手くいくのか、理屈上よく理解できていない。。。

No comments:

Post a Comment