Question

我正在使用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一起使用时不起作用。知道为什么我的选择器错了，以及如何为可折叠内容制作动画？谢谢。

Answer 1

您的HTML标记不正确。您最后错过了结束</div>。
.live已弃用。请参阅here。

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

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

1 个答案: