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 自体は含まれません。クリックされた div の兄弟からのfullscreen_show みクラスを削除します。

  2. バインディングの時点では、 class を持つ要素はありませんfullscreen_show。これに対抗するため.on()に、より高いレベルの要素で使用して、動的に作成された要素をクラスに含めることができますfullscreen_show

于 2013-06-02T12:43:50.300 に答える