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
});
});
});
任何想法,这可能是造成这个问题呢?