Flexslider标题和jquery隐藏/显示

Question

我试图在点击Flexslider幻灯片标题时显示内容。显然有很多幻灯片，每个幻灯片都有自己的标题和描述。我有第一个显示/隐藏切换正常工作。其他人不会做任何事情。

$('a.toggle').bind('tapone',function(e){
  if($(this).hasClass('active')){
    $(this).removeClass('active');
$('#capinfo').slideUp({duration: 300, easing: "easeOutQuad"});
 } else {
     $(this).addClass('active');
     $('#capinfo').slideDown({duration: 300, easing: "easeOutQuad"});
   }
});

以下是Flexslider列表项：

<li>
  <div class="flex-caption">
    <a class="toggle">
        <h3 class="caps">A Project Title</h3>
    </a>
    <div id="capinfo" class="caption-content">
       <p>Captions and cupcakes. Winning combination.</p>
    </div>

    </div>
    <img src="img/1994.jpg"/> 
</li>

Answer 1

您可能希望定位课程.caption-content：

$('a.toggle').bind('tapone',function(e){
    if($(this).hasClass('active')){
         $(this).removeClass('active');
         $('.caption-content').slideUp({duration: 300, easing: "easeOutQuad"});
    } else {
         $(this).addClass('active');
         $('.caption-content').slideDown({duration: 300, easing: "easeOutQuad"});
    }
});