Question

这就是我切换内容的方式

$("#content").hide(); 
    $(".toggle").click(function(){  
    if($(this).attr("class") == "toggle"){
        $(this).removeClass("toggle");
        $(this).addClass("add_active");
    }else{
        $(this).removeClass("add_active");
        $(this).addClass("toggle");
    }
    $("#content").slideToggle("fast");
    return false;
});

这是我的jsfiddle：http://jsfiddle.net/4ZrDb/

就像您可以看到下面的内容根据切换的动画向下滑动。但我希望切换所显示的内容能够涵盖其他内容，＃content应该与现在刚下推的其他内容重叠。

任何想法如何做到这一点？

Answer 1

你可以在这里用CSS做到这一点：

#content { background: #fff; position: absolute; width: 100% }

还在内容div之前移动切换段落，如下所示：

<p class="toggle">Toggle</p>
<div id="content">Test</div>
<div>Other Content below</div>

http://jsfiddle.net/jsweazy/4ZrDb/19/

Answer 2

你需要这个

$("#content").hide();
    $(".toggle").click(function(){    

        $("#content").slideToggle("fast");
        $("#othercontent").slideToggle("fast");  

    return false;
});

http://jsfiddle.net/enthusiastic/4ZrDb/27/

Answer 3

尝试这样的事情：

<强> HTML：

<div id="header">
    Some text at the top
</div>
<div id="slide">
    <div id="content">Test<br>content<br>for<br>slide</div>
    <p class="toggle">Toggle</p>
</div>
<div id="below">Other Content below</div>

<强> CSS：

p.toggle{
    cursor:pointer; font-size:13px; font-weight:bold;  color:#5b5b5b;
    margin:0px; padding:0px; padding-left:18px;
}

p.add_active{
    cursor:pointer; font-size:13px; font-weight:bold;  color:#5b5b5b;
    margin:0px; padding:0px; padding-left:18px;
}

#slide {
    position:fixed;
    background: #ccc;
    display: block;
    width: 100%;
}
#content {
    display: block;

}
#below {
    margin-top: 20px;
}

JS代码与您发布的相同。 http://jsfiddle.net/Z3MdY/

在jQuery中切换和重叠内容

3 个答案: