くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]縦ナビゲーションでアコーディオンメニュー②

シンプルなアコーディオンメニューに、マウスオーバー時と展開中のパネルの色を変化させて、現在位置をより分かりやすくしてみます。

f:id:pleasure10501:20150420225826p:plain

展開中のパネルにはクラス名「selected」、マウスオーバー時のパネルにはクラス名に「over」をそれぞれ付けることにします。

 

1.CSSに、クラス名overとselectedを追加して背景色などを指定

dl dt.over {
    background: #F4B886;
}
dl dt.selected{
    background: blue;
}

 

2.jQueryスクリプトに追加(ピンクの文字の部分)

$(function(){
 // 初期設定
  $('dd:not(:first)').css('display','none');
  $('dt:first').addClass('selected'); //最初のdt要素にクラス名selectedを付与する

    //dt要素をクリックした場合の処理
  $('dl dt').click(function(){  
     if($('+dd',this).css('display')=='none'){
       $('dd:visible').slideUp('slow');
       $('+dd',this).slideDown('slow');
       $('dt.selected').removeClass('selected'); 
   //一旦クラス名selectedが付けられたdt要素のクラス名を削除する
       $(this).addClass('selected');  
  // 新たにクリックされたdt要素にクラス名selectedを追加する
    }
 // マウスオーバーで変化をつける為の処理
   }).mouseover(function(){ //マウスオーバー時のdt要素にクラス名overを追加する
     $(this).addClass('over');
   }).mouseout(function(){ //マウスが外れたdt要素にクラス名overを削除する
     $(this).removeClass('over');
   });
  });

 

要素の検証を見ると、ちゃんと”.selected”".over"が付いています!

f:id:pleasure10501:20150420230433p:plain