JQuery：動畫/遍歷DOM樹

我正在研究Q &網站的頁面。所有的答案都隱藏起來。我試圖讓滑出的答案動畫化。問題和答案旁邊分別有幾張Q和A的照片。

我想將Q移動到左側，將答案向下滑動，並在第一次單擊問題時淡入「A」圖片。

在第二次點擊同一個問題時，我希望它隱藏起來。如果另一個人被點擊，全部隱藏並顯示答案。

代碼：

我無法讓代碼正常工作。我假設我的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>

這是一個問題/答案組合。總共有五個頁面，它們都使用與所示的類相同的類（除了消息內容外，它們看起來都完全一樣）。

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-一個是指定給所述圖片的類。出於某種原因，第一次點擊時，Q淡出，第二次和所有後續點擊，其他所有Q開始向右移動。答案永遠不會滑落。我對JQuery相當陌生，但是我已經閱讀了所有我使用的API資料。我不確定發生了什麼問題。

任何幫助，將不勝感激！

來源

2012-11-21 cydonknight

你的第一個問題是在javascript中使用HTML註釋。你需要使用''''（單行）或'/ * * /'（多行）註釋。接下來，嘗試設置一個[jsFiddle]（http://jsfiddle.net）來演示這個問題，並使我們更容易幫助你:) –

我不確定我是否100％瞭解情況，但是我想出了我從問題中拿走的東西。讓我知道我有多遠和任何問題，我可以詳細說明。另外，如果你可以發佈你正在使用的jsFiddle，那也會有幫助。

$(document).ready(function() { 
    $('.faq-question-container').click(function() { 
     //-- move all instances of .faq-answer-container up 
     $('.faq-answer-container').slideUp(); 

     //-- move 'active' instances back to their original position and remove 'active' class 
     $('.faq-question-active').removeClass('faq-question-active').animate({ 
      left: '-=50' 
     }); 

     //-- slide/animate our question 
     $(this).find('.faq-answer-container').slideToggle(); 
     $(this).addClass('faq-question-active').animate({ 
      left: '+=50' 
     }); 
    }); 
});

http://jsfiddle.net/8qzvN/4/

這些意見也應與正確的語法替換。這些是你正在使用的PHP評論。

更換

<!-- PHP Comment -->

與

// Javascript comment

或

/* 
    Group of JS comments 
*/

來源

2012-11-21 18:18:44

明白它的工作原理！就評論而言，這就是記事本++出於某種原因評論JQuery的原因。它還沒有給我任何問題。 – cydonknight

想通了！的jsfiddle：http://jsfiddle.net/HEywH/

如果有人好奇：

$(document).ready(function(){ 
       $(".faq").each(function(){ 

       <!-- this is to add the images to the questions and answers --> 

        $(this).prepend('<img src="images/faq-q.png" alt="Question" class="letter-q">'); 
        $(this).closest(".faq").find(".faq-answer").prepend('<img src="images/faq-a.png" alt="Answer" class="letter-a">'); 
       }); 



       $(".faq-question").toggle(function(){ 

        <!-- this initializes the state --> 

        $(this).closest(".faq").siblings(".faq").find(".faq-answer-container").slideUp(); 
        $(this).closest(".faq").siblings(".faq").find(".letter-a").fadeOut(); 
        $(this).closest(".faq").siblings(".faq").find('.letter-q').animate({left:"25px"},"fast"); 

        <!-- animation --> 

        $(this).closest(".faq").find('.letter-q').animate({left:"-=15px"},"slow"); 
        $(this).closest('.faq').find('.faq-answer-container').slideDown('slow'); 
        $(this).closest(".faq").find(".letter-a").fadeIn("slow"); 

       },function() { 

       <!-- initialization --> 
        $(this).closest(".faq").siblings(".faq").find(".faq-answer-container").slideUp(); 
        $(this).closest(".faq").siblings(".faq").find(".letter-a").fadeOut(); 
        $(this).closest(".faq").siblings(".faq").find('.letter-q').animate({left:"25px"},"fast"); 

        <!-- animation --> 

        $(this).closest(".faq").find('.letter-q').animate({left:"25px"},"slow", function() { 
         $(this).closest('.faq').find('.faq-answer-container').slideUp('slow'); 
         $(this).closest('.faq').find(".letter-a").fadeOut("slow"); 
        }); 
       });    
      }); 
     </script> 

    </head> 
    <body> 
     <div class="faq-container"> 
      <img src="images/faq-header.jpg" alt="faq header"> 
      <div class="faq"> 
       <div class="faq-question">How much is the application fee? Can I request an application fee waiver? </div> 
       <div class="faq-answer-container"> 
        <div class="faq-answer">The application fee is $70 and we do not offer fee waivers at this time. </div> 
       </div>    
      </div>

事實證明，我的DOM遍歷是相當糟糕的。一點研究，我能弄清楚我的問題。

來源

2012-11-21 21:45:59 cydonknight

JQuery：動畫/遍歷DOM樹

回答

相關問題