javascript操作后显示/隐藏div

我有一个JSFIDLE，它允许用户点击一个正方形，然后正方形展开。我想做的是，单击一个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') ;

});

这里有一把小提琴：

可以使用append（）添加div，并在使用remove（）折叠框时将其移除

$（'div'）。在（'click'，函数（e）{
if（$（this）.hasClass（'clicked'））{
设置超时（函数（div）{
返回函数（）{div.css（'z-index'，''）；}；
}（$（本）），1000）；
$（'#addediv'）。删除（）；
}
否则{
$（this.css（'z-index'，400）；
$（this.append（'这里有一些文本'）；
}
$（this.toggleClass（'clicked'）；
});

如果您使用此代码

$('div').on('click', function (e) { 
if ($(this).hasClass('clicked')) {
    setTimeout(function (div) {
        return function () { div.css('z-index', '') ; } ;
    } ($(this)), 1000) ;
   $( ".first_box" ).empty();        
}
else {
    $(this).css('z-index', 400) ;
}
$(this).toggleClass('clicked') ;
$('<p>Text</p>').appendTo('.first_box');

$（'div'）。在（'click'，函数（e）{
if（$（this）.hasClass（'clicked'））{
设置超时（函数（div）{
返回函数（）{div.css（'z-index'，''）；}；
}（$（本）），1000）；
$（“.first_box”）.empty（）；
}
否则{
$（this.css（'z-index'，400）；
}
$（this.toggleClass（'clicked'）；
$（“Text
”）.appendTo（“.first_box”）；

}))

内容

文本>

将出现在div中。首先，如果单击（因此，如果它变大）

您可以向内容div添加一个“show”类，它将在不透明度为0到1的内容中转换：

$('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') ;
    //make sure to show the content in the clicked div.
    $(this).find('.content').toggleClass('show');

});

CSS的变化是：

.content {
    opacity: 0;
}

.content.show {
    opacity: 1;
}

编辑：要保留扩展内容的颜色：单击后，只需添加额外的css类即可保留内容背景颜色。见更新：

---

我假设文本在其他div之外

你可以试试这个

HTML

添加CSS

.overlay-text {
    position:absolute;  
    display:none;
    text-align:center;
    width: 289px !important ;
    height: 289px !important ;
    margin-top: 0 !important ;
    margin-left: 0 !important ;
    z-index:500;
    pointer-events:none;
}

h3{color:white;}

---

谢谢你的回复。这是可行的，但过渡失败了。有办法解决吗？过渡失败了，有办法解决吗？谢谢你的回复。我在代码中出错了。。有}）；在最后添加代码（在他们从代码标签中得到的帖子中），这太棒了！谢谢有没有一种方法可以在鼠标展开后保持悬停颜色不变，即使你把鼠标拿开了？添加css类以在展开后保持颜色不变。。。请接受答案，如果它符合您的需要。这真的很好。还有一个问题，有没有办法在鼠标滑落时保持悬停颜色不变？我在叠加中添加了背景色。谢谢

.first_box.clicked {
    background-color: green;
}

.second_box.clicked {
    background-color: blue;
}

.third_box.clicked {
    background-color: red;
}

.fourth_box.clicked {
    background-color: yellow;
}

<section class="overlay-text"><h3>Some Text</h3></section>
<div class="first_box"></div>
<div class="second_box"></div>
<div class="third_box"></div>
<div class="fourth_box"></div>

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

});

.overlay-text {
    position:absolute;  
    display:none;
    text-align:center;
    width: 289px !important ;
    height: 289px !important ;
    margin-top: 0 !important ;
    margin-left: 0 !important ;
    z-index:500;
    pointer-events:none;
}

h3{color:white;}