###前提・実現したいこと
アコーディオンメニューで開閉時それぞれ画像を切り替えたい。
背景画像での切替ではなくimgタグの部分を切り替えたい。
<ddが閉じている時> img_01_close.jpgを表示
<ddが開いている時> img_01_open.jpgを表示
がクリックする度に画像が切替かわる
そしてddの項目は最初は全て閉じていて、
同時にひとつしか開かないようにしたいです。
背景画像や矢印文字などでの切替のサンプルはいくつか見つかりましたが、
画像そのものを切り替えるサンプルを見つけることができませんでした。
何卒よろしくお願いします。
###該当のソースコード
html
1<dl id="select"> 2 <dt><img src="common/img/img_01_close.jpg" alt=""></dt> 3 <dd>テキストや画像</dd> 4 <dt><img src="common/img/img_02_close.jpg" alt=""></dt> 5 <dd>テキストや画像</dd> 6 <dt><img src="common/img/img_03_close.jpg" alt=""></dt> 7 <dd>テキストや画像</dd> 8 <dt><img src="common/img/img_04_close.jpg" alt=""></dt> 9 <dd>テキストや画像</dd> 10</dl>
javascript
1$(function(){ 2 $("#select dt").on("click", function() { 3 $(this).next().slideToggle(); 4 }); 5});
css
1#select dd { 2 display: none; 3}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/24 11:45 編集
2017/02/24 14:32 編集
2017/02/25 01:56