1

我已经设置了一个 Fiddle 来展示我正在尝试做的事情。

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');
});
4

1 回答 1

3

工作演示

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

您的代码有 2 个问题：

  1. $(this).siblings().removeClass('fullscreen_show');-$(this).siblings()不包括点击的 div 本身。它将fullscreen_show 仅从单击的 div 的兄弟姐妹中删除该类。

  2. 在绑定点，类中没有元素fullscreen_show。为了解决这个问题，您可以.on()在更高级别的元素上使用以将动态创建的元素包含在类中fullscreen_show

于 2013-06-02T12:43:50.300 回答