顯示/隱藏全屏覆蓋

Question

我已經設置了一個小提琴來演示我正在嘗試做什麼。

http://jsfiddle.net/AndyMP/nNUkr/

全屏幕疊加顯示，但它並沒有消失，因爲我希望它（點擊時）。

<div id="fullscreen" class="fullscreen_hide"></div> 

<div id="button" class="button"></div> 

CSS

.button{ 
    position:absolute; 
    z-index:2000; 
    height:100px; 
    width:200px; 
    background:red; 
    float:left; 
} 

.fullscreen_hide{ 
    position:absolute; 
    z-index:1000; 
    opacity:0; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    background:#141414; 
} 
.fullscreen_show{ 
    position:absolute; 
    z-index:3000; 
    opacity:1; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    background:#141414; 
} 

代碼

$('.button').click(function(){ 
    $(this).siblings().addClass('fullscreen_show'); 
}); 
$('.fullscreen_show').click(function(){ 
    $(this).siblings().removeClass('fullscreen_show'); 
}); 

Answer 1

Working Demo

$('.button').click(function(){ 
    $(this).siblings().addClass('fullscreen_show'); 
}); 

// use .on() to account for .fullscreen_show elements created later 
$(document).on('click', '.fullscreen_show', function(){ 

    // removed .siblings() to include just the clicked div and not its siblings alone 
    $(this).removeClass('fullscreen_show'); 
}); 

有兩個問題與您的代碼：

1. $(this).siblings().removeClass('fullscreen_show'); - $(this).siblings()不包含點擊的div本身。它會從點擊div的兄弟姐妹中刪除類fullscreen_show只有。

2. 在綁定點上，沒有類fullscreen_show的元素。爲了解決這個問題，你可以在更高級別的元素使用.on()用類包括動態創建的元素fullscreen_show