0

当您单击某些内容时，我正在尝试使我在另一个 div 之上的 div 显示出来。

这是两个 div 的代码，没有每个 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 做什么，但我为你创建了一个例子，也许这就是你想要的：

现场演示

所以有两个div。第二个 div 覆盖第一个。单击“按钮”会隐藏第二个 div，因此会显示第一个。再次单击“按钮”，第二个 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 回答
0

从上面复制所有内容时，我使用$('#randomarticle_englarge').toggle();. 检查浏览器控制台是否有错误；你可能会在那里找到答案。

于 2014-01-15T19:51:41.533 回答