Question

我已经设立了一个小提琴，以展示我正在尝试做的事情。

出现全屏覆盖图，但它不会像我想要的那样消失（点击时）。

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

您的代码存在两个问题：

$(this).siblings().removeClass('fullscreen_show'); - $(this).siblings()不包含点击的div本身。它会从点击的div的兄弟姐妹中删除课程fullscreen_show 。
在绑定点，没有类fullscreen_show的元素。要解决此问题，您可以在更高级别的元素上使用.on()，以包含动态创建的元素fullscreen_show

显示/隐藏全屏叠加

1 个答案: