爲什麼我的循環幻燈片隱藏所有幻燈片？

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

爲什麼我的循環幻燈片隱藏所有幻燈片？

回答

相關問題