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

Posted 2023-02-25

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

【英文标题】：jQuery slideToggle issue with captions in Wordpress and flexslider

【发布时间】：2012-05-11 14:21:44

【问题描述】：

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

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

【问题讨论】：

如果有的话，我建议也提供 HTML/CSS。我通常会使用 CSS 隐藏它，然后使用 slideToggle 打开。

【参考方案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');
);

【参考方案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');
);

【讨论】：

发生的情况是，一旦在第一张幻灯片上发起点击，其余的幻灯片标题就会变为“display:block”（使用网络检查器）

我更新了代码，因为按钮在每个 元素中被渲染了两次。隐藏幻灯片中的标题仍在更改为 display:block

当我手头不多的时候玩起来有点困难，但我更新了代码，让它可以选择图像。您可以在jsfiddle.net 中向我展示您的代码实现吗？