2

私はWordpressにFlexsliderを使用しており、flexsliderスライドショーの各画像のキャプションをslideToggleしたいと考えています。

スライドショーの例を次に示します: http://lifescienceaurora.com/news/cu-anschutz/cu-anschutz-news/ranking-file/

左上隅の「プラス」をクリックします。

問題は次のとおりです。「+」を 2 回クリックして現在の画像のキャプションを表示および非表示にした後、次のスライドにそのキャプションが表示されます。

トグルボタンをクリックするまで、すべてのキャプションを非表示にする必要があります。

これが私のコードです:(「flexsliderのレンダリングされたコード」を反映するように更新しました) 

jQuery.noConflict();

jQuery(document).ready(function($){

    $('.flex-caption').hide();
    $('.flexslider').append('<button class="captionToggle">+</button>');

    $('.flexslider button').click(function(){
        $('.flex-caption').slideToggle('slow');
    });
});

そして、ここに HTML の例を示します 

<div id="smg_1" class="flexslider">
<ul class="slides">
<li><img src="image1.jpg"/>
    <p class="flex-caption">caption1 here</p>
    <button class="captionToggle">+</button>
</li>
<li><img src="image2.jpg"/>
    <p class="flex-caption">caption2 here</p>
    <button class="captionToggle">+</button>
</li>
<li><img src="image3.jpg"/>
    <p class="flex-caption">caption3 here</p>
    <button class="captionToggle">+</button>
</li>
<li><img src="image4.jpg"/>
    <p class="flex-caption">caption4 here</p>
    <button class="captionToggle">+</button>
</li>
</ul>
</div>

私の jQuery の理解は例にすぎないため、これをトラブルシューティングするためのツールはありません。

どんな助けでも大歓迎です。ありがとう。

4

2 に答える 2

0

.stop()または.stop(1)を使用して、以前のアニメーション キューをクリアしてみてください。

$('span.wp-caption-text').stop(1).slideToggle('slow');

あなたの問題に関連して、次を試してください：

$('.wp-caption button').click(function(){
    $('span.wp-caption-text').is(':visible').hide(); // hide all already visible captions
    $('span.wp-caption-text').stop(1).slideToggle('slow');
});
于 2012-05-11T14:39:19.820 に答える
-1

新しいスライドが表示されるたびに、イベントを閉じるためにイベントを見逃しているように聞こえます。$('.wp-caption-text').hide();スライドがロード/アクティブ化されるたびに実行することをお勧めします。

私は flexslider を使用していませんが、これは私が見つけた API に基づいています。 

$(window).load(function() {
   $('.flexslider').flexslider({
       before: function () {
            $('.flex-caption').hide();
       }
   });
});

更新: これは、開いているボタンのみを切り替えます。ただし、スライド間のキャプションは閉じません。

 $('.flexslider ul.slides li button').click(function(){
    $(this).prev().slideToggle('slow');
});
于 2012-05-11T14:35:44.367 に答える