slideUp() 和 slideDown() 在 .delegate() 中不起作用答案

【问题标题】：slideUp() and slideDown() not working inside .delegate()slideUp() 和 slideDown() 在 .delegate() 中不起作用
【发布时间】：2013-07-11 12:25:11
【问题描述】：

我正在使用 JQM 开发一个网站。我已经通过 AJAX 数据动态创建了一个可折叠的。现在，我想让可折叠的上下滑动顺畅（JQuery mobile）。问题是 .delegate 函数正在执行，但它使用默认的滑动速度并且没有改变。我的代码是：

$('#search-page').delegate('.menu-collapse','expand', function (event) {
      $(this).children().slideDown(300);
  }).delegate('.menu-collapse','collapse', function (event) {
    $(this).children().next().slideUp(300);
      event.stopPropagation();
});

我认为 $(this) 有一些问题。任何人都可以解决它吗？提前致谢。

【问题讨论】：

在 jsfiddle 中显示这个
jsfiddle.net/3pNSx/11 。不要介意使用的糟糕的 HTML。可折叠现在只是一个简单的，实际上它必须通过AJAX来。
其实jqm里面有几个关于动画collapsible的回答问题：example

标签： javascript jquery jquery-mobile

【解决方案1】：

试一试，这正是你想要的效果

$(document).on('pageinit',function(event){
    $('[data-role="collapsible"]').bind('expand', function (event) {

        $(this).find('.ui-collapsible-content')
               .css('display','none')
               .slideDown(300, function(){
                  $(this).css('display','block');
                });

    }).bind('collapse', function (event) {  

       $(this).find('.ui-collapsible-content.ui-collapsible-content-collapsed')
              .slideUp(300);    
    });
});

FIDDLE HERE

【讨论】：

它不工作。而不是 .on() 我想使用 .delegate() 因为可折叠是动态构建的。
不不不不，你动画li??反向动画在哪里？
感谢@JLP。那行得通。但我有一个疑问。当我运行上面提到的代码时，对于 pagecreate 期间的正常可折叠，它运行完美。但是当我动态创建一个可折叠并使用它时，它不起作用！！..但是你给出的解决方案有效。我能知道为什么吗？？
我认为如果 DOM 动态变化，折叠动画不起作用，但是 display:block/none 完成，所以折叠后，我强制显示为 none 以正确重复当前 DOM 上的 scrollDown 。 .

【解决方案2】：

我认为，您需要找到方法，如何为可折叠集设置动画，而不是为什么 delegate 不起作用
查看this 之类的问题，然后尝试一下。
但我不能重复这个，因为它有点不同。

【讨论】：