質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

8469閲覧

アコーディオンメニューの画像切替(背景画像ではなく)と一つだけ開く方法

ma.sa

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/02/24 08:52

###前提・実現したいこと
アコーディオンメニューで開閉時それぞれ画像を切り替えたい。
背景画像での切替ではなく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}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

img自体を切り替えたいというのは、
imgタグのsrc属性を切り替えたいということでしょうか?
ということであれば、

javascript

1$(該当のimg).attr('src',切替後のsrc);

で切り替えることは出来ます。

切替時のパスにルールがあるのであれば、
たとえば、

javascript

1$(this).attr('src', $(this).attr('src').replace('_on', '_off'));

のように、画像パスの一部を切り替えることができると思います。

投稿2017/02/24 09:30

yohe32

総合スコア76

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ma.sa

2017/02/24 11:45 編集

ご回答ありがとうございます。 ご提示いただいたコードを入れてみましたが どうしても上手く動かすことができませんでした。 開いているときは末尾に「_open」 閉じているときは末尾に「_close」 と命名するつもりです。 $(function(){ $("#select dt").on("click", function() { $(this).next().slideToggle(); $(this).attr('src', $(this).attr('src').replace('_open', '_close')); }); }); とすれば良いのでしょうか? $(this)の部分をいろいろ変えてみたのですが、 動きませんでした。
yohe32

2017/02/24 14:32 編集

thisにはそのfunctionが実行される要素が入っていますので、 上記の場合、dt = this のようなイメージです。 src属性を変えたいのは、dtの中のimgなので、 .find()を使います。 $(function(){ $("#select dt").on("click", function() { $(this).next().slideToggle(); $(this)find('img').attr('src', $(this).attr('src').replace('_open', '_close')); }); }); こんな感じでしょうでしょう?
ma.sa

2017/02/25 01:56

追記ありがとうございます。 いろんなやり方があるのですね!勉強になりました。
guest

0

ベストアンサー

たとえばこんな感じでどうでしょう?

javascript

1$(function(){ 2 $("#select dd").hide(); 3 $("#select dt").on("click", function() { 4 var index=$("#select dt").index(this); 5 $("#select dt").each(function(i) { 6 if(i==index){ 7 var flg=$(this).next('dd').css('display')=='none'; 8 $(this).next('dd').slideToggle(); 9 $(this).find('img').attr({ 10 'src':(flg?'common/img/img_01_open.jpg':'common/img/img_01_close.jpg'), 11 'alt':(flg?'open':'close') 12 }); 13 }else{ 14 $(this).next('dd').slideUp(); 15 $(this).find('img').attr({ 16 'src':'common/img/img_01_close.jpg', 17 'alt':'close' 18 }); 19 } 20 }); 21 }); 22}); 23

追記

ああ、open,closeの画像はそれぞれ違うんですね

javascript

1<script> 2$(function(){ 3 $("#select dd").hide(); 4 $("#select dt").on("click", function() { 5 var index=$("#select dt").index(this); 6 $("#select dt").each(function(i) { 7 if(i==index){ 8 var flg=$(this).next('dd').css('display')=='none'; 9 $(this).next('dd').slideToggle(); 10 $(this).find('img').attr({ 11 'src':(flg?'common/img/img_0'+(i+1)+'_open.jpg':'common/img/img_0'+(i+1)+'_close.jpg'), 12 'alt':(flg?'open':'close')+(i+1) 13 }); 14 }else{ 15 $(this).next('dd').slideUp(); 16 $(this).find('img').attr({ 17 'src':'common/img/img_0'+(i+1)+'_close.jpg', 18 'alt':'close'+(i+1) 19 }); 20 } 21 }); 22 }); 23}); 24</script> 25<dl id="select"> 26 <dt><img src="common/img/img_01_close.jpg" alt="close1"></dt> 27 <dd>テキストや画像</dd> 28 <dt><img src="common/img/img_02_close.jpg" alt="close2"></dt> 29 <dd>テキストや画像</dd> 30 <dt><img src="common/img/img_03_close.jpg" alt="close3"></dt> 31 <dd>テキストや画像</dd> 32 <dt><img src="common/img/img_04_close.jpg" alt="close4"></dt> 33 <dd>テキストや画像</dd> 34</dl>

投稿2017/02/24 09:28

編集2017/02/24 11:38
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ma.sa

2017/02/24 10:50

早速のご回答ありがとうございます。 ご提示頂きましたコードで試してみましたが、 img_01_close.jpgをクリックすると、 dt内のimgが全てimg_01_close.jpgになってしまいます。 画像の差替は行われているのですが、全て img_01_close.jpg と img_01_open.jpg の切替になってしまいます。 一つだけ開くのは問題ありませんでした。
yambejp

2017/02/24 11:39

ちょっと勘違いしていましたので、追記で修正しておきます
ma.sa

2017/02/25 01:54

追記ありがとうございます。 イメージ通りの動きになりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問