概要：
私はウェブサイトのQ&Aページに取り組んでいます。すべての答えは最初は隠されています。答えがスライドアウトするアニメーションを作成しようとしています。質問と回答の横に、それぞれ Q と A の小さな写真があります。
Qを左に移動し、回答を下にスライドさせ、質問の最初のクリックで「A」の画像をフェードインさせたい.
同じ質問の 2 回目のクリックで、非表示にします。別のものをクリックすると、すべて非表示になり、回答が表示されます。
コード：
コードを正しく動作させることができません。DOM ツリーのナビゲーションに何か問題があると思いますが、何が原因かわかりません。
HTML:
<div class="faq">
<div class="faq-question">Question goes here </div>
<div class="faq-answer-container">
<div class="faq-answer">Answer goes here </div>
</div>
</div>
これは 1 つの質問と回答の組み合わせです。ページには全部で 5 つのクラスがあり、それらはすべて表示されているクラスと同じクラスを使用します (メッセージ コンテンツを除いて、すべてまったく同じように見えます)。
JQuery:
<script>
$(document).ready(function(){
$(".faq-question").toggle(function(){
<!-- this slides up all siblings -->
$(this).siblings().slideUp();
<!-- animation -->
$(this).find('.letter-q').animate({left:"-=15"},"slow", function() {
$(this).closest('faq').find('faq-answer-container').slideDown('slow');
$(".letter-a").fadeIn("slow");
});
},function() {
<!-- slides up all siblings -->
$(this).siblings().slideUp();
<!-- animation -->
$('.letter-q').animate({left:"+=15"},"slow", function() {
$(this).closest('faq').find('faq-answer-container').slideUp('slow');
$(".letter-a").fadeOut("slow");
});
});
});
</script>
.letter-q と .letter-a は、写真に指定されたクラスです。何らかの理由で、最初のクリックで Q がフェードアウトし、2 回目以降のすべてのクリックで、他のすべての Q が右にシフトし始めます。答えが滑り落ちることはありません。私は JQuery にはかなり慣れていませんが、使用したすべての API 資料を読みました。何が問題なのかわかりません。
どんな助けでも大歓迎です！