javascript - 如何向我的 div 添加内容？

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，但是子div里面已经有内容了，所以还是显示出来的。

再次阅读本文档，尤其是示例部分。例如，您可以使用切换

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

Answer 2

我所做的是将可见性设置#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');
        }
    });
});

Answer 3

您可以尝试这样，只需在运行时清空/填充您的内容 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');  }

        });


    });
});

演示