Question

这是我的js：

$('ul li div').hide();
$('ul li a').click(function(){
    var nextUp = $(this).next();
    if ($('.infobox').is(':empty')) {
        nextUp.appendTo('.infobox').slideToggle(400);
    } else {
        $('.infobox').empty();
        nextUp.appendTo('.infobox').slideToggle(400);
    }
});

，HTML /工作示例在这里：http://jsbin.com/ajizeh/3#

我正在尝试在链接后附加div中的内容并将其附加到.infobox。它只有一半工作，它第一次被点击时工作，但如果再次点击，则不会出现任何内容。此外，再次点击时的隐藏不像它正在显示时那样平滑。

那么在点击另一个元素之后如何让它工作呢...让它再次显示，即使它被点击过一次，也是如何让隐藏更顺利？

Answer 1

试试这个jsfiddle

我相信这就是你要找的东西：

$(function() {
    $('ul li div').hide();

    $('ul li a').click(function() {
        var nextUp = $(this).next().clone();

        if ($('.infobox').is(':empty')) {
            nextUp.appendTo('.infobox').slideDown(400);
        } else {
            if (nextUp.html() != $('.infobox').children().html()) {
                $('.infobox').slideUp(400, function() {
                    $('.infobox').empty();
                    nextUp.appendTo('.infobox');
                    $('.infobox').children().show();
                });
                $('.infobox').slideDown(400);
            }
        }
    });
});

我将var nextUp更改为div的克隆，因为如果您只是将div附加到页面上的其他位置，则会移动它。因此，当你试图再次追加它时，它就不再存在了。

对于平滑的slideUp，我在完成上滑后清空了.infobox。这样它就不会消失。

再次单击后追加AppendTo元素

1 个答案: