切换显示：没有另一个div前面的div？答案

【问题标题】：Toggle display:none with div in front of another div?切换显示：没有另一个div前面的div？
【发布时间】：2014-01-16 06:07:04
【问题描述】：

我正在尝试使我在另一个 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 但没有任何效果。

【问题讨论】：

标签： javascript jquery html toggle fadeto

【解决方案1】：

绝对定位必须相对于容器。为了绝对定位某些东西，您需要指出它的绝对定位。类似的东西。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我不太确定你想用 div 做什么，但我为你创建了一个示例，也许这就是你想要的：

LIVE DEMO

所以有两个 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');
    });
});

【讨论】：