如何选择此可折叠内容并为其制作动画？答案

【问题标题】：How can I select and animate this collapsible content?如何选择此可折叠内容并为其制作动画？
【发布时间】：2013-01-09 13:55:44
【问题描述】：

我正在使用 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>

我正在尝试为下拉菜单设置动画，但我无法选择它。这是我的 JS：

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

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

【问题讨论】：

您正在尝试选择具有“ui-collapsible-content”类的孩子，但我在您的 html 中没有看到它们。
你的h3中没有孩子
ui-collapsible-content 是 h3 DOM 元素的姐妹，而不是子元素。你应该选择它 var $controlGroup = $(this).closest(".ui-collapsible").children('.ui-collapsible-content').css("background-color", "#ff3333");

标签： jquery jquery-mobile jquery-selectors children

【解决方案1】：

您的 HTML 标记不正确。最后你错过了一个结束</div>。
.live 已弃用。见here。

从 jQuery 1.7 开始，不推荐使用 .live() 方法。使用 .on() 附加事件处理程序。
旧版本 jQuery 的用户应该使用 .delegate() 而不是 .live()
h3 元素内部没有类ui-collapsible-content 的子元素，实际上h3 元素内部只有文本。
确保您拥有最新版本，因为有些旧版本似乎有一些problems associated with the pageinit event。确保事件被执行。

【讨论】：