Question

我无法弄清楚为什么我的slideDown第一次只能运行。我有一个元素，当点击时将内容添加到空div，然后滑动div打开。在该动态div内容是一个元素，当单击时滑动div关闭，然后清空div内容。

这在第一轮工作正常，但在＆＃34;关闭＆＃34;元素已被点击，＆＃34;打开＆＃34;元素将不再向下滑动div。它仍然取代了内容，但是第二次下滑并不起作用。

在我的实际项目中，内容是通过ajax请求生成的，但我能够使用基本的硬编码动态内容在小提琴中复制该问题。

$('body').on('click', 'span.open', function(){
    var content = '<br>test<br>test<br>test<br>test<br>test<br>test<br>test';
    content += '<br><span class="close">Close</span>';
    var container = $('div#content');
    $(container).html($(content)).slideDown(1000);
});
$('body').on('click', 'span.close', function(){
    var container = $('div#content');
    $(container).slideUp(1000).queue(function(){ $(this).html(''); });
});

Answer 1

您不需要在那里使用.queue()。而是使用.slideUp()的回调：

var container = $('div#content');
$('body').on('click', 'span.open', function () {
    var content = '<br>test<br>test<br>test<br>test<br>test<br>test<br>test';
    content += '<br><span class="close">Close</span>';
    $(container).html($(content)).slideDown(1000);
});
$('body').on('click', 'span.close', function () {
    $(container).slideUp(1000, function () {
        $(this).html('');
    });
});

<强> jsFiddle example

div内容多次更改后，slideDown无法正常工作

1 个答案: