DEMO

Question

我在这里得到了一个小JS函数：http://jsfiddle.net/9UzNq/7/ 单击该栏时，它会从其高度扩展到300px。我尝试在那里应用div作为内容，但无法理解。

var open = false;

$(document).ready(function () {
    $('#title').click(function () {
        open = !open;
        $('#ABCD').animate({
            height: open ? "300" : "0"
        }, 700);
        if (open) $('#title').addClass('glow');
        else $('#title').removeClass('glow');
    });
});

内容div应该与'wrapit'同时打开。

Answer 1

您只需将父div #ABCD高度设置为0px，但孩子已经在其中包含内容，因此它仍会显示。

再次阅读此documentation，尤其是示例部分。您可以使用切换功能

$('#ABCD').animate({
    height: "toggle"
}, 700);

Answer 2

您可以尝试这样做，只需在运行时清空/填充内容div的文本，并使用animate的回调函数。

var open = false;

$(document).ready(function () {
    $('#title').click(function () {
        open = !open;

         $('#ABCD').empty();

        $('#ABCD').animate({
            height: open ? "300" : "0"
        }, 700,function(){

            if (open){ $('#title').addClass('glow');
                     $('#ABCD').text("Some content that shouldn't be showed before the div 'ABCD' is open");
                     }
            else{ $('#title').removeClass('glow');  }

        });


    });
});

DEMO

Answer 3

我所做的是将#ABCD的可见性设置为隐藏。单击标题时，使用jQuery将可见性设置回visible。

css

#ABCD {
    width:100%;
    z-index:2;
    height: 0px;
    visibility:hidden;
}

<强>的jQuery

$(document).ready(function () {
    $('#title').click(function () {
        open = !open;
        $('#ABCD').animate({ height: open ? "300" : "0" }, 700);
        if (open){
            $('#title').addClass('glow');
            $('#ABCD').css('visibility','visible');
        }
        else{
            $('#title').removeClass('glow');
            $('#ABCD').css('visibility','hidden');
        }
    });
});

如何向div添加内容？

3 个答案:

DEMO