显示/隐藏全屏覆盖

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