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

这是一个小提琴：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') ;
});

Answer 2

如果您使用此代码

$('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');

}）;

如果点击，内容<p>text></p>将出现在div .first_box中（如果它变大，则会显示在内）

Answer 3

您可以添加＆＃34; show＆＃34; class to content div，它将在内容中转换为不透明度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类，即可在点击后保留内容背景颜色。查看更新的fiddle：

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

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

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

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

Answer 4

我假设文本不在其他div中。

你可以试试这个。

fiddle Link

HTML

<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>

JS

$('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') ;

});

添加了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;}

在javascript操作后显示/隐藏Div

4 个答案: