jQuery slideToggle 问题与 Wordpress 和 flexslider 中的标题有关

Question

我正在为 Wordpress 使用 Flexslider，并希望在 flexslider 幻灯片放映中滑动切换每个图像的标题。

以下是幻灯片的示例： http://lifescienceaurora.com/news/cu-anschutz/cu-anschutz-news/ranking-file/

点击左上角的“加号”。

问题来了： 单击两次“+”显示和隐藏当前图像的标题后， 下一张幻灯片显示了它的标题。

在点击切换按钮之前，我需要隐藏所有字幕。

这是我的代码：（我已经更新它以反映“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 的理解仅来自示例，因此我没有解决此问题的工具。

任何帮助将不胜感激。谢谢。

Answer 1

尝试使用.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');
});

Answer 2

听起来你错过了每次出现新幻灯片时关闭它的事件。我建议每次加载/激活幻灯片时运行 $('.wp-caption-text').hide();。

我没有使用过flexslider，但这是基于我找到的API。

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

更新：这将仅滑动切换您打开的按钮 li。但是，它不会关闭幻灯片之间的标题。

 $('.flexslider ul.slides li button').click(function(){
    $(this).prev().slideToggle('slow');
});