[jQuery]縦ナビゲーションでアコーディオンメニュー②
シンプルなアコーディオンメニューに、マウスオーバー時と展開中のパネルの色を変化させて、現在位置をより分かりやすくしてみます。
展開中のパネルにはクラス名「selected」、マウスオーバー時のパネルにはクラス名に「over」をそれぞれ付けることにします。
1.CSSに、クラス名overとselectedを追加して背景色などを指定
dl dt.over {
background: #F4B886;
}
dl dt.selected{
background: blue;
}
$(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"が付いています!