0

何かをクリックすると、別の div の上にある div が表示されるようにしようとしています。

これは、2 つの div のコードで、それぞれに含まれるすべてのものは含まれていません。

<div id="randomarticle_enlarge">
    <h1></h1>
    <h4></h4>
        <p></p>
        <p></p>
</div>
<div class="bodybag">
    <h1></h1>
    <h4></h4>
        <p></p>
        <p></p>
</div>

次に、もちろん、それぞれにcssがあります：

.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}

bodybag クラスに z-index と position:relative を持たせるべきですか? 私はそうではありませんが、それは機能しています（この時点で）。

とにかく、私はこのスクリプトを書いて、まさに私がやりたいことをしています:

$(document).ready(function() {
    $('.popular').click(function() {
    $('#textmask').fadeTo( 'fast', 0.1);
    $('#backgroundmask').css('background-color', 'white');
    });
});

次にやりたいことは、textmask と backgroundmask が必要に応じてフェードイン/変更されるときに、randomarticle_enlarge div が表示されるようにすることです。

.toggle と .toggleClass と .slideToggle と .show を使用してみましたが、何も機能していません。

4

3 に答える 3

0

絶対配置は、コンテナーを基準にする必要があります。何かを絶対的に配置するには、絶対的に配置されているものを示す必要があります。これらの線に沿った何か。

<div id="randomarticle_englargeContainer">
    <div id="randomarticle_englarge">
    </div>
    <div class="bodybag">
    </div>
</div>


#randomarticle_englargeContainer {
    position: relative;
}
.bodybag {
    position: absolute;
    left: 0;
    top: 0;
}
于 2014-01-15T19:33:54.227 に答える
0

divで何をしたいのか正確にはわかりませんが、例を作成しました。おそらくこれがあなたが望むものです:

ライブデモ

したがって、2 つの div があります。2 番目の div は 1 番目の div をカバーします。「ボタン」をクリックすると、2 番目の div が非表示になるため、最初の div が表示されます。「ボタン」をもう一度クリックすると、2 番目の div が表示され、1 番目の div が再びカバーされます。

HTML:

<div class="popular">Click me!</div>
<div class="container">
    <div id="randomarticle_enlarge">
        <h1>A</h1>
        <h4>B</h4>
        <p>C</p>
        <p>D</p>
    </div>
    <div class="bodybag">
        <h1>E</h1>
        <h4>F</h4>
        <p>G</p>
        <p>H</p>
    </div>
</div>

CSS:

.container {
    position: relative;
}

.bodybag {
    width: 100px;
    height: 200px;
    background-color: red;
}

#randomarticle_enlarge {
    width: 100px;
    height: 200px;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;  
}

.hide {
    display: none;
}

jQuery:

$(document).ready(function() {
    $('.popular').click(function() {
    $('#randomarticle_enlarge').toggleClass('hide');
    });
});
于 2014-01-15T22:07:04.417 に答える