田舎暮らしのウェブ屋ブログ

ホームページのハウツー・グルメレポ・書評 etc・・・

jQuery 開閉ボタンつきアコーディオン マウスオーバーあり

jQuery 開閉ボタンつきアコーディオン ボタンマウスオーバーありのサンプル

下図のような、jQueryを使った「開閉ボタンつきアコーディオン」にプラス「開閉ボタン部分にマウスオーバー」というパターンの備忘録です。

jQuery 開閉ボタンつきアコーディオン ボタンマウスオーバーありのサンプル

———————————————————————-

開閉ボタンつきアコーディオンは、下記のブログを参考にさせていただきました。
ありがとうございました!

超簡単jQuery!”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法

このブログは、真面目な記事はためになるし、
おもしろネタや企画ページは全力でアホで(ほめてます)大変面白いのでおすすめです。

———————————————————————-

開閉ボタンつきアコーディオン マウスオーバーありの設置方法はこちら

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>
<script>
    $(function(){
        $("#accordion dt").on("click", function() {
            $(this).next().slideToggle();
            $(this).toggleClass("active");
        });
	$("#accordion dt").mouseover(function(){
	    $(this).addClass("over");	
	});
	$("#accordion dt").mouseout(function(){
	    $(this).removeClass("over");	
	});
    });
</script>

 

HTML

<dl id="accordion">
  <dt>メニューボタン</dt>
  <dd>
  テキストテキストテキスト
 </dd>
</dl>

 

CSS

#accordion {
	width:400px;
}
#accordion dt {
	cursor:pointer;
	background-image: url(images/toggle_demo01/plus.gif);
	background-repeat: no-repeat;
	background-position: 350px center;
	border:solid 1px #ccc;
	padding:15px;
	font-size:14px;	
}
#accordion dd{
	display:none;
	font-size:14px;
	line-height:140%;
	margin:0;
	padding:15px;	
	}
#accordion dt.active{
	background-image: url(images/toggle_demo01/minus.gif);
}
#accordion dt.over {
	background-color: #CCC;
}

 

「.mouseover」で、dtにclass 「over」を追加(.addClass(“over”))

「.mouseout」で、追加したclass 「over」を削除(.removeClass(“over”))

jQuery 開閉ボタンつきアコーディオン マウスオーバーありのサンプルはこちら

私はjsは得意じゃないのでもっとスマートな方法があったら教えてください。
jQueryを使用する案件が多いので勉強しなおした方がいいかもしれないと思う今日この頃です。

関連記事

コメント

コメントはまだありません。

コメントの投稿

お名前

メールアドレス

URL

トラックバック: http://miraiyanet.com/myblog/jq140529.html/trackback

ページトップへ