如何選擇和動畫這個可摺疊的內容？

我使用jQuery Mobile和我有這個網站：如何選擇和動畫這個可摺疊的內容？

<ul id="thelist" data-corners= "false" > 
<div class = "theListItem" data-role="collapsible-set" data-collapsed="false"> 

<div data-role="collapsible" data-collapsed="false" data-theme="a"> 
<h3>$1.48 - 10/31/2012 - niko Reade #14410 - Brooklyn Ny</h3> 
<div data-role="controlgroup" data-type="horizontal"> 
    <a class= "green" href="categorize.html" data-transition="slide" data-direction="reverse" data-role="button">Yes</a> 
    <a class="red" href="#" data-role="button">No</a> 
    <a class= "blue" href="IDontKnow.html" data-transition="slide"data-role="button">I don't know</a> 
</div> 
</div> 
</ul>

而且我想下來動畫下降，但我無法選擇它。這裏是我的JS：

$('#transPage, #categorizePage, #IDKPage').live('pageinit', function() { 
$('.trans .theListItem h3').click(function() { 
    var $controlGroup = $(this).children('.ui-collapsible-content').css("background-color", "#ff3333"); 
}); 
});

的.ui可摺疊內容行之有效的CSS，但是當我嘗試使用JS使用它不起作用。任何想法爲什麼我的選擇器是錯誤的，以及如何動畫可摺疊的內容？謝謝。

來源

2013-01-09 Squirrl

你想選擇的孩子，上課「UI可摺疊內容」，但我不認爲他們會在你的HTML .. –

沒有孩子在你的'h3' – l2aelba

的UI可摺疊內容是h3 DOM元素的姐妹，而不是孩子。您應該使用var $ controlGroup = $（this）.closest（「。ui-collapsible」）。children（'。ui-collapsible-content'）。css（「background-color」，「＃ff3333」）選擇它。 – Romain

您的HTML標記不正確。最後你錯過了一個關閉</div>。
.live已棄用。見here。

在jQuery 1.7的，所述.live（）方法被棄用。使用.on（）附加事件處理程序。舊版本的jQuery的
用戶應該優先使用.delegate（）來.live（）
有帶班ui-collapsible-content的h3元素中沒有子元素，其實裏面有隻有文字h3元素。
確保你有最新版本，因爲對於一些較舊的版本，似乎有一些problems associated with the pageinit event。確保事件已執行。

來源

2013-01-09 14:38:27 ShadowScripter

如何選擇和動畫這個可摺疊的內容？

回答

相關問題