Question

我有这个HTML

 <div class = "theListItem" data-role="collapsible-set" data-collapsed="false">
    <div data-role="collapsible" data-collapsed="false" data-theme="a">
        <h3>$11.48   -  10/31/2012   -   Duane Reade #14410  -  Brooklyn Ny</h3>
        <div data-role="controlgroup"  data-type="horizontal">
          <a class= "green" href="categorize.html" data-transition="slide" 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>

单击时会折叠内容。我想为它添加动画，以便慢慢打开？我假设我使用.animate？

我试过了：

$('document').ready(function(){
    $('.theListItem').click(function(){
           $('.controlgroup').animate({height: 100%,), 500};
     });
});

Answer 1

由于.controlgroup 不存在，您无法使用class。
使用属性选择器[]

<强> jsBin demo

$(function(){
    $('.theListItem').click(function(){
           $('[data-role="controlgroup"]', this).animate({height: 'toggle'}, 500);
     });
});

或者：

$('[data-role="controlgroup"]', this).slideToggle(500);

<强> jsBin demo

Answer 2

$(document).ready(function() {
    $('.theListItem').click(function() {
        $('.controlgroup').slideToggle(500);
    }
}

我想你想要有这样的滑动效果 - 你应该使用幻灯片，如果你想滑动;）。

如何将.animate添加到我的html中？

2 个答案: