1

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>
4

1 に答える 1

0

.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"});
    }
});
于 2013-11-14T16:42:59.803 に答える