为什么我的循环幻灯片隐藏了所有幻灯片？

Question

jQuery 插件 cycle 查找类 slideshow 的元素。我想将此类添加到

元素中，以利用其
• 制作幻灯片。但是，当我将 slideshow 类添加到
  元素时，所有
  • 消失，并且我没有看到任何幻灯片。

HTML 如下所示：

<ul>
  <li>
    <h3 class="expander">...</h3>
    <div class="content">
      <p>...</p>
      <h4>...</h4>
      <ul class="slideshow">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </li>
  ...
</ul>

如您所见，幻灯片

包含在另一个列表中。该父列表由标题组成，单击时会显示每个列表项的内容。当 DOM 准备好时，我以编程方式隐藏所有 .content。然后，我向 .expander 添加一个点击侦听器，以便它们可以显示隐藏的 .content。

在这些 .contents 中，我有 .slideshow，它们使用循环插件循环浏览其列表项。

关于这一切的另一个奇怪的事情是，在我将标题转换为相关内容的切换之前，幻灯片显示效果非常好。事实上，当我向标题添加切换功能时，幻灯片不再可见。但是如果我拿走幻灯片放映类，它们就会再次可见。当然，它们不再具有幻灯片功能...

这是所有这一切的 javascript：

$(document).ready(function()
{
  var expanders = $('.expander');
  expanders.each(function()
  {
    $('.content', $(this).parent()).toggle();
    $(this).click(function()
    {
      $('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
    });
  });
  $('.slideshow').each(function() {
    var parent = $(this).parent();
    $(this).cycle(
    {
      fx: 'scrollHorz',
      easing: 'easeInOutCirc',
      timeout: 0,
      nowrap: 1
    });
  });
});

知道什么可能导致此问题吗？

Answer 1

显然，我需要将循环代码移到切换代码上方，如下所示：

$(document).ready(function()
{
  $('.slideshow').each(function() {
    var parent = $(this).parent();
    $(this).cycle(
    {
      fx: 'scrollHorz',
      easing: 'easeInOutCirc',
      timeout: 0,
      nowrap: 1
    });
  });
  var expanders = $('.expander');
  expanders.each(function()
  {
    $('.content', $(this).parent()).toggle();
    $(this).click(function()
    {
      $('.content', $(this).parent()).toggle("blind", {"easing":"easeInOutCirc"}, "normal");
    });
  });
});

我不知道为什么会这样，所以更好的答案将不胜感激。