2

我正在为 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 的理解仅来自示例，因此我没有解决此问题的工具。

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

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();
       }
   });
});

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

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