Jquery 如何选择此可折叠内容并设置其动画？

我正在使用jQuery Mobile，我有以下html：

<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>

.ui可折叠内容在CSS中运行良好，但在我尝试将其与JS一起使用时不起作用。你知道为什么我的选择器错了，以及如何设置可折叠内容的动画吗？谢谢

您的HTML标记不正确。您缺少结尾处的结束语

.live

已被弃用。看

从jQuery1.7开始，不推荐使用.live（）方法。使用.on（）附加事件处理程序。
jQuery旧版本的用户应优先使用.delegate（），而不是.live（）

类为

ui可折叠内容的
h3
元素中没有子元素，实际上，
h3
元素中只有文本

确保你有最新的版本，因为有些旧版本似乎有一些。确保已执行该事件

---

您正在尝试选择子元素，类为“ui可折叠内容”，但我在html中没有看到它们。

h3

中没有子元素ui可折叠内容是h3 DOM元素的姊妹元素，而不是子元素。您应该使用var$controlGroup=$（this）.closest（“.ui可折叠”）.children（“.ui可折叠内容”）.css（“背景色”，“#ff3333”）；

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