[ 勉強 ] アコーディオンメニューその2

人様のソースコードを読み解くコーナーです。週一、月曜日更新でやる予定でしたが、あまりにも忙しすぎたので遅れてしまいました><

前回、アコーディオンメニューを取り上げましたが、今回も同じアコーディオンメニューです。

パネルの開け閉めは、slideToggle、を使用しましたが、これはslideUpとslideDownを交互に繰り返すものなので、今回は、slideUpとslideDownと使ったアコーディオンメニューについて調べてみます。

Java Script

$(function(){
   $('.sub_menu').hide();
   $('.main_menu').click(function(){
      $('ul.sub_menu').slideUp();
      if($('+ul.sub_menu',this).css('display') == 'none'){
         $('+ul.sub_menu',this).slideDown();
      }
   });
});

この実装はちょっと難しいのですが、

  1. 見出し部分(.main_menu)をクリックすると、同じli内にあるul部分(.sub_menu)をスライドアップする
  2. ul部分(.sub_menu)が非表示になっているものをクリックすると、ul部分(.sub_menu)をスライドダウンして表示される

ということです。

つまり、常にクリックしたパネルのul部分(.sub_menu)が表示され、それ以外のパネルのul部分(.sub_menu)は非表示になります。

もし、これを前回と同様、クリックしたパネルの部分だけをスライドアップ・スライドダウンさせたい場合は、

Java Script

$(function(){
   $('.sub_menu').hide();
   $('.main_menu').click(function(){
      $('+ul.sub_menu',this).slideUp();
      if($('+ul.sub_menu',this).css('display') == 'none'){
         $('+ul.sub_menu',this).slideDown();
      }
   });
});

というように書けますね。

$(‘+ul.sub_menu’,this)が3回も出てきますので、こういう場合は変数にしたほうが処理が早い(はず)です。

Java Script

$(function(){
   $('.sub_menu').hide();
   $('.main_menu').click(function(){
      var submenu = $('+ul.sub_menu',this);
      submenu.slideUp();
      if(submenu.css('display') == 'none'){
         submenu.slideDown();
      }
   });
});

こうやってみると、同じ実装にするなら、『slideToggle()』は簡単で便利ですねー。