Question

jQuery插件cycle查找类slideshow的元素。我想将此类添加到<ul>元素，以便从其<li>中制作幻灯片。但是，当我将slideshow类添加到<ul>元素时，所有<li>都会消失，我也不会获得任何幻灯片显示。

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>

如您所见，幻灯片<ul>包含在另一个列表中。此父列表由标题组成，这些标题在单击时显示每个列表项的内容。当DOM准备好时，我以编程方式隐藏所有.content s。然后，我向.expander添加了一个点击监听器，以便他们可以显示隐藏的.content。

我在这些.contents内.slideshow s使用循环插件循环遍历其列表项。

关于这一切的另一个奇怪的事情是，在我将标题转换为关联内容的切换之前，幻灯片放映完美。实际上，当我将切换功能添加到标题时，幻灯片不再可见。但是如果我拿走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");
    });
  });
});

我不知道为什么会有这样的效果，所以会有更好的答案。

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

1 个答案: