上下に展開・格納する縦型メニューjQueryの簡略化に成功

現在拙サイト・ブログ等で使用中の「上下に展開・格納する縦型メニューjQuery」はかなり煩雑で、今回整理して簡略化させることに成功。

縦型メニューのHTML


<ul>
 <li>
  <span id="accordion01" class="accordion">news</span>
  （ここに「+」または「−」が挿入される）
  <ul id="subNavi01" class="subNavi">
   <li><a href="#">ESZETT</a></li>
   <li><a href="#">TYPŒ</a></li>
   <li><a href="#">LETTER-PRESS</a></li>
  </ul>
 </li>
 <li>
  <span id="accordion02" class="accordion">works</span>
  （ここに「+」または「−」が挿入される）
  <ul id="subNavi02" class="subNavi">
   <li><a href="#">web design</a></li>
   <li><a href="#">web demo</a></li>
   <li><a href="#">print</a></li>
  </ul>
 </li>
 <li>
  <span id="accordion03" class="accordion">projects</span>
  （ここに「+」または「−」が挿入される）
  <ul id="subNavi03" class="subNavi">
   <li><a href="#">event calendar</a></li>
   <li><a href="#">letterpress map</a></li>
   <li><a href="#">line museum</a></li>
  </ul>
 </li>
 <li>
  <span id="accordion04" class="accordion">bibliography</span>
  （ここに「+」または「−」が挿入される）
  <ul id="subNavi04" class="subNavi">
   <li><a href="#">basic</a></li>
   <li><a href="#">typography</a></li>
   <li><a href="#">letterform</a></li>
  </ul>
 </li>
</ul>

これまでのjQuery


$(function(){
 $("#subNavi01, #subNavi02, #subNavi03, #subNavi04").hide();
 $("#accordion01, #accordion02, #accordion03, #accordion04").after("<span class='openClose'>+</span>");
 $("#accordion01").click(function(){
  $("#subNavi01:not(:animated)").animate({height: 'show'}, 500,'easeOutQuad');
  $("#accordion01").next().replaceWith("<span class='openClose'>–</span>");
  $("#subNavi01:not(:animated)").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion01").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi02").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion02").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi03").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion03").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi04").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion04").next().replaceWith("<span class='openClose'>+</span>");});
 });
 $("#accordion02").click(function(){
  $("#subNavi02:not(:animated)").animate({height: 'show'}, 500,'easeOutQuad');
  $("#accordion02").next().replaceWith("<span class='openClose'>–</span>");
  $("#subNavi02:not(:animated)").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion02").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi01").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion01").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi03").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion03").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi04").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion04").next().replaceWith("<span class='openClose'>+</span>");});
 });
 $("#accordion03").click(function(){
  $("#subNavi03:not(:animated)").animate({height: 'show'}, 500,'easeOutQuad');
  $("#accordion03").next().replaceWith("<span class='openClose'>–</span>");
  $("#subNavi03:not(:animated)").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion03").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi01").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion01").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi02").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion02").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi04").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion04").next().replaceWith("<span class='openClose'>+</span>");});
 });
 $("#accordion04").click(function(){
  $("#subNavi04:not(:animated)").animate({height: 'show'}, 500,'easeOutQuad');
  $("#accordion04").next().replaceWith("<span class='openClose'>–</span>");
  $("#subNavi04:not(:animated)").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion04").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi01").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion01").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi02").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion02").next().replaceWith("<span class='openClose'>+</span>");});
  $("#subNavi03").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion03").next().replaceWith("<span class='openClose'>+</span>");});
 });
});
うん、ものの見事に煩雑だね〜。ここではもう詳しく解説しないが、ただ1つだけ云えば、ID属性で各ナビごとに一々指示しているから。詳細は、拙ブログ上下に展開・格納するナビおよび縦型メニュー展開・収納時（開閉時）にメニュー横の＋−表示が切替るjQueryをご覧あれ。

整理した結果


1.$(function(){
2. $(".subNavi").hide();
3. $(".accordion").after("<span class='openClose'>+</span>");
4. $(".accordion").click(function(){
5.  $(this).next().next().animate({height: 'show'}, 500,'easeOutQuad');
6.  $(this).next().replaceWith("<span class='openClose'>–</span>");
7.  $(".accordion").next().next().not(":animated").animate({height: 'hide'}, 500,'easeInQuad',↵
   function(){$(this).prev().replaceWith("<span class='openClose'>+</span>");});
8. });
9.});
あらまあスッキリ。
要は、クラス属性での指定に替えて汎用性を高めたことだね。
解説すると、
  • 2行目：subNaviクラスを持つUL要素で囲んだ箇所は最初見えないようにする。これはCSSにて「.subNavi {display:none;}」を指定した方が良い。ページロード時にsubNavi部分が1度表示されてから消えるという動作が解消されるから。
  • 3行目：accordionクラスを持つSPAN要素の後ろにSPAN要素の兄弟要素として「＋」を追加する（詳細は縦型メニュー展開・収納時（開閉時）にメニュー横の＋−表示が切替るjQueryをご覧あれ）。
  • 4行目：accordionクラスを持つSPAN要素の1つをクリックすると、
    • 5行目：このときの$(this)は実際にクリックしたaccordionクラスを持つSPAN要素を指し、それのnext().next()、つまり$(this)の次の次の兄弟要素であるsubNaviクラスを持つUL要素で囲んだ箇所が表示される。この時注意したいのは、クリックされたaccordionクラスを持つSPAN要素の次の兄弟要素は3行目で追加されるafter()内のSPAN要素であるということ。なのでsubNaviクラスを持つUL要素は次の次の兄弟要素となる。
    • 6行目：クリックされたaccordionクラスを持つSPAN要素の次の兄弟要素である、after()で追加したSPAN要素を「−」に置き換える。
    • 7行目：accordionクラスを持つSPAN要素の次の次の兄弟要素であるsubNaviクラスを持つUL要素で囲んだ箇所を格納する。ここで注意。セレクターが$(this)ではなく$(".accordion")なのは、クリックされたaccordionクラスだけでなく全てのaccordionクラスを対象にしているから。この縦型メニューは、どこか1箇所が展開されたら他の全てのsubNaviは格納するようにしているので。
    • 7行目：後半の関数では$(this).prev()と指示しているがこれは何を指しているか。この時の$(this)は7行目前半の$(".accordion").next().next()、つまりはsubNaviクラスを持つUL要素を指していて、それのprev()、つまりその前の兄弟要素であるafter()で追加したSPAN要素を指す。で、この内「−」に差替えられたものを「＋」に変更する。
以上だが、click関数内に1度に展開・格納の指示が入っているので、この動作は展開したかと思えばすぐ格納されて結局subNaviクラス部分は表示されないのではないかと思うが、ここでのミソは、7行目にあるnot(":animated")。これをここに入れることによって、1回のクリックでクリックされたaccordionクラス内のsubNaviクラスはanimateしながら展開され、もう一度自身を含めたいずれかのaccordionクラスをクリックすると、クリックされたaccordionクラス内のsubNaviクラスはanimateしながら展開されると同時に、すでに展開しているsubNaviクラスはanimate状態ではないのでこれが7行目の指示のにより格納される、という動作になる。







コメント

コメントを投稿

よく読まれている記事

CSSボタンでテキストを天地中央に揃えるとき、なぜボタン高と行高を一緒にするのか

イメージ
表題の件が気になり調べたものを共有した方がイイかなと思い公開してみる。 自身の中でまだよく噛み砕けていないので判りづらい箇所があるかと思うが、そこはご寛恕を。 参考 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification（日本語訳） Eric A. Meyer著. 株式会社クイープ訳. CSS完全ガイド第2版 . オライリージャパン, 2010 インライン要素とは何か 文書構造を構成するブロックレベル要素内の特定箇所にある特定の機能や論理的な意味を付加する要素をいう。それ自身の前後に改行を生成しない。例としては、a要素、em要素、span要素など。 インライン要素には非置換要素と置換要素とがある。今回は置換要素には触れない（置換要素の代表例はimg要素）。 非置換要素とは何か 要素に囲まれた内容がそのまま表示される要素。HTMLやXHTMLの要素の大半は非置換要素である。 インライン非置換要素の特徴 widthとheightは適用されない。 背景はコンテンツエリアとpaddingに適用される。 上下marginは、事実上適用されない。 左右paddingは、要素の先頭と末尾のみに適用される。 上下paddingは、要素の背景を上下に伸ばすが、行の高さに影響しないため、背景色がある場合は上下の行（実際は上の行）に重なってしまう。 line-heightは何を制御しているか 行高を指定するline-heightは単純に行間を制御しているのではなく、 leadingという、コンテンツエリアの上下にある余白を制御 している。 leadingはline-heightとfont-sizeとの差 であり、 この差を等分 して コンテンツエリアの上下に加えることによって行間が決まる （コンテンツエリア＋leadingをインラインボックスという）。 コンテンツエリアとは、インライン非置換要素では、要素内の全ての文字を繋ぎ合わせたボックスでfont-sizeの値と同じ高さになる。 図解すると以下の通り。 つまり、line-heightが設定され...
Read more »

FullCalendarの導入からカレンダー毎の色指定まで

イメージ
2012年7月の拙サイト改装2回目時に既に導入している「 FullCalendar 」について、導入からGoogleカレンダーの複数読込み、カレンダー毎の色指定までをおさらい。基本的な流れはFullCalendarサイトの解説を踏襲。 デフォルト状態 下記改修を施した後 1. ダウンロード Downloadページ から「fullcalendar-1.5.3.zip」をダウンロードして解凍後、自サーバーへアップ。 2. fullcalendarのCSSとJSを読込む <head> タグ内に以下を記述。 <link rel="stylesheet" type="text/css" href=" fullcalendar.css " /> <script type="text/javascript" src=" fullcalendar.js "></script> <script type="text/javascript" src=" fullcalendar.min.js "></script> <script type="text/javascript" src=" gcal.js "></script> 赤字部分は各自の階層に合うように適宜変更。 3. FullCalendarにGoogleカレンダーを読込むためのjQueryを <head> タグ内に記述 必ず <script> タグで囲むこと。 <script type="text/javascript"> $(document).ready(function() { $(' #calendar ').fullCalendar({ // あとでここに色々追記 }) }); </script> 4. <body> タグ内のFullCalendarを挿入したい箇所にID属性を挿入 <...
Read more »

FacebookページのフィードURLを取得しウォールを自サイトに表示

イメージ
結局未採用だけど、折角調べて試してみたので記録しておく。 参照サイトは jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン） | webOpixel FacebookページのフィードURL取得は（取得ツール付き） FacebookページのフィードURLを取得してフィードリーダーで購読する方法: 小粋空間 以上、深謝。 自分のFacebookページのフィードURLを取得 上記参照サイトでは、自FacebookページのID確認方法について書かれているが、小粋空間さんのページに「自FacebookページのフィードURL取得ツール」があるので、自FacebookページのURLを入力すれば、フィードURLを表示してくれる。但しフォーマットはAtom1.0なので、RSS2.0フォーマットは以下のように変更する。 小粋空間さんの取得ツールで取得したフィードURL https://www.facebook.com/feeds/page.php?format= atom10 &id= [取得したID] RSS2.0フォーマットに変更後 https://www.facebook.com/feeds/page.php?format= rss20 &id= [取得したID] jQueryを自サイトに貼込み webOpixelさんからjQueryをを拝借し、自サイトに貼り込む。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { var formatData = function(date) { var d = new Date(date); return (d.getFullYear() + '.' + ("0"+(d.getMonth()+1)).slice(-2) + '.' ...
Read more »