Jquery切換幻燈片的子元素

Question

我試圖創建一個標題列表，當點擊時會顯示他們下面的信息，然後再次單擊時會隱藏該元素。

這裏是我的jQuery：

$(document).ready(function() { 

     $('.content').hide(); 

     $(".reveal-more").click(function() { 
      $(".content", this).slideDown("slow"); 
      $(".content", this).addClass("open-information"); 
      $(".reveal-more h3").addClass("open-container"); 

     }); 

     $(".reveal-more").click(function() { 

      $(".content").hide(); 
     }); 

}); 

，這裏是我的HTML：

<div class="reveal-more "> 
    <h3 >Party Wall Act</h3> 
    <div class="content"> 
      Lorem Ipsum ..... 
      </div> 
</div> 

當我點擊標題。內容滑落，但當我再次單擊時，它不會滑回。誰能幫忙？

Answer 1

使用toggle()和toggleClass();

$(document).ready(function() { 

    $('.content').hide(); 

    $(".reveal-more").click(function() { 
     $(".content", this).toggle("slow"); 
     $(".content", this).toggleClass("open-information"); 
     $(".reveal-more h3").toggleClass("open-container"); 

    }); 
}); 

fiddle here

Answer 2

你需要做一個條件的點擊事件，wheter顯示/隱藏內容。現在，您將綁定點擊事件兩個次，其中最後一個覆蓋前一個。 你應該改變你的代碼是這樣的：

$(".reveal-more").click(function() { 
    if ($(".content", this).hasClass('open-information')){ 
     // It is visible, then hide it 
     $(".content", this).removeClass("open-information").slideUp("slow"); 
     $("h3", this).removeClass("open-container"); 
    } else { 
     // Show it, as you previously did 
     $(".content", this).addClass("open-information").slideDown("slow"); 
     $("h3", this).addClass("open-container"); 
    } 
});