jQueryをクリックして画像ギャラリーを開く

Question

私は、製品のサムネイルがたくさんあるページを持っており、それぞれにはボタンをクリックしてスライドするギャラリーが必要です。私はそれをしましたが、問題は、ボタンをクリックするとギャラリーの各製品が滑り落ちてしまい、それが欲しくないということです。私はボタンとギャラリーの上に別のIDを追加することでそれを行うことができることを知っているが、それはコードをコピーして貼り付けなければならず、それは単なる良い習慣ではない。私はjQueryのエキスパートではなく、DOMのトラバーサルについてはあまり知らないので、私はちょうど正しい方向で私を指すために、ちょっとした助けが必要です。ここで

は私が証明するために作られたペンです：https://codepen.io/anon/pen/EmbdXz

そして、これは私のjQueryのです：

$(".product-wrapper #galleryTrigger").on("click", function() { 
    $(".gallery").slideToggle(); 
}); 

あなたが「FOTO」をクリックしたときにペンで見ることができるように、それはすべてのイメージギャラリーのをトリガーページ上に また、私はこのコードを試してみましたが、それはうまくいきませんでした：

$(".product-wrapper #galleryTrigger").on("click", function() { 
    $(this).closest(".gallery").slideToggle(); 
}); 

何かアドバイスが役立つだろう。前もって感謝します。 :)

Answer 1

$(this).siblings(".gallery").slideToggle(); 

Answer 2

あなたは、単に.next()で2番目の試みで.closest()を交換するだけです：私はこの作業hereを紹介する新しいフィドルを作成しました

$(".product-wrapper #galleryTrigger").on("click", function() { 
    $(this).next(".gallery").slideToggle(); 
}); 

。

#galleryTriggerのIDも重複しています。これは、無効なマークアップに加えて、jQueryと混同する可能性があります。あなたはクラスに置き換えることができます。

希望すると便利です。 :)

Answer 3

これを試してください。

$(this).parent().find(".gallery").slideToggle();