jquery - 我怎样才能使用jquery-ui的toggleClass更好地动画化它？

Question

我有以下代码:

http://jsfiddle.net/zmhRK/

这个问题非常图形化，所以我认为我无法比在 jsfiddle 上实际展示它更好地解释它。问题是，当你按 [toggle] 时，你可以看到列表项正在展开，在这个过渡效果中你看到的只是 parent 的背景颜色，这是相当难看的。所以，我想要的是列表项的内容在动画期间可见，而不是仅在动画之后可见。

我知道如果我设法将样式属性设置为转换中的元素上的 display:block ，这是可能的，但是一旦转换完成，我将需要某种回调函数来删除 display:block 。抱歉，这个回调函数不存在。

有什么办法可以解决这个问题吗？

Answer 1

您可以使用.slideToggle()来创建动画:

$(document).ready(function(){
    $('.sidebar-menu-item-controls').append('[toggle]').click(function(){

        //select the parent of this element, then select the next sibling,
        //which is the UL associated with this click event
        $(this).parent().next().slideToggle(300);
    });
});​

这是一个演示:http://jsfiddle.net/jasper/zmhRK/8/

请注意，这也适用于您的嵌套 UL。