javascript - 在 javascript 操作后显示/隐藏 Div

Question

我有一个 jsfiddle，它允许用户点击一个正方形，然后正方形就会展开。我想要做的是在单击一个 div 后允许出现一个单独的 div。例如，如果单击第一个 div，我希望发生过渡，然后文本显示在绿色上。

这是我正在使用的 javascript:

$('div').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;
        } ($(this)), 1000) ;
    }
    else {
        $(this).css('z-index', 400) ;
    }
    $(this).toggleClass('clicked') ;

});

http://jsfiddle.net/eD56Y/11/

Answer 1

这是一个 fiddle :http://jsfiddle.net/UawH4/

您可以使用 append() 添加一个 div，并在折叠框时使用 remove() 将其删除。

$('div').on('click', function (e) { 
    if ($(this).hasClass('clicked')) {
        setTimeout(function (div) {
            return function () { div.css('z-index', '') ; } ;
        } ($(this)), 1000) ;
        $('#addedDiv').remove();
    }
    else {
        $(this).css('z-index', 400) ;
        $(this).append('<div id="addedDiv">Here is some text</div>');
    }
    $(this).toggleClass('clicked') ;
});