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

jQuery插件cycle寻找类slideshow的元素。我想将此类添加到<ul>元素中，以制作出其<li> s的幻灯片。但是当我将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。然后，我向.expander添加点击监听器，以便他们可以显示隐藏的.content。

它是这些.contents里面我有.slideshow s使用循环插件来循环他们的列表项。

关于这一切的另一个奇怪的事情是，幻灯片的工作完美之前，我把我的标题转换为切换其关联的内容。事实上，当我向标题添加切换功能时，幻灯片不再可见。但是如果我拿走了课程，他们再次可见。当然，他们不再有幻灯片functionnality ...

下面是这一切的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 
    }); 
    }); 
});

任何想法，这可能是造成这个问题呢？

来源

2011-11-20 Shawn

很显然，我需要将功能代码上面的代码周期，就像这样：

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

我不知道，知道为什么这个工程，但这样更好的答案，将不胜感激。

来源

2011-11-25 06:53:50 Shawn

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

回答

相关问题