在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

這裏有一個小提琴：http://jsfiddle.net/UawH4/

您可以添加與追加（一個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

您可以添加一個「秀」類內容的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;}