jQueryアコーディオンヘッダーの後にスワップイメージ

Question

私はjqueryアコーディオンを持っています。私がしようとしているのは、このアコーディオンの右にあるイメージを変えることです。イメージは、彼らが選択したアコーデオンの選択に依存します。私はこれを理解するためにjQueryを十分に経験していません。リンクは下にあり、ここで私が説明していることが分かります。あなたはそれをチェックアウトする時間がある場合。右側の画像は、アコーディオンの選択に応じて別の画像にスワップアウトする必要がある画像です。どんな助けでも大歓迎です。事前に

http://luistovar.com/sandbox

ありがとう！

Answer 1

最も簡単な方法は、既存のaccordeonメニューコードにコードを追加するのではなく、いくつかの新しいコードを書くことです（もちろん、既存のaccordeonコードにコードを追加することもできます）。

あなたの4つの画像を絶対に（！）お互いの上に置きます。そのため、あなたはそのうちの1つしか見ることができません。例えば、.pictureのようなクラスを与えます。各写真にIDを与えます（例：＃picture1）。

すべてのタグにIDを付けます（例：＃menu_item1）。

次に、以下とjQueryを使用してください。

$("#menu_item1").click(
    function(){ 
     $(".picture").fadeOut(200, function(){ 
      $("#picture1").fadeIn(); 
     }); 
    }); 

これを各メニュー項目/画像ごとにコピーし、番号を調整します。 コードが少なくて済む方法がありますが、このようにして理解するのは簡単です。

私はそれをチェックしていませんが、それがあなたを助けてくれることを願っています。それはあなたに小さなフェード効果を与えるはずです。これは200番の数値をより小さいまたは大きい数値（ミリ秒）に調整することで微調整できます。

幸運を祈る！