Question

我有一个页面，其中包含旧式960x包装中的所有正文内容。我需要在页面中间添加横幅，但此横幅需要跨越页面的整个宽度。不仅如此，它还有一个使用slideUp()和slideDown()的表演/隐藏手风琴。所以它需要在滑动时将其下面的内容推下来。

此处的完整示例：http://jsfiddle.net/dvawzg8g/1/

我能想到让包装器的子元素成为页面的整个宽度（包装器具有设置的像素宽度）的唯一方法是使用绝对定位。当我这样做时，它会在其他页面内容的上方或下方结束，并且不会使用slideUp()和slideDown()进行推送。

Answer 1

所以基本上这背后的概念是通过让横幅定位为绝对并且在其后面有一个空div来模拟它的位置来伪造效果：

html

<div class="container">
    <div class="content"><p>potatopotatopotatopotatopotatopotatopotatopotato</p></div>
    <div class="content">potatopotatopotatopotatopotatopotatopotatopotatopotatopotato</div>
    <div class="banner">banner</div>
    <div class="filler">filler</div>
    <div class="content">potatopotatopotatopotatopotatopotato</div>
    <div class="content">potatopotatopotatopotatopotato</div>
</div>

Css

.container{
    width:960px;
    height:1000px;
    margin:0 auto;
}
.content{
    height:200px;
    border:1px solid #000;
}
.banner{
    position:absolute;
    width:100%;
    height:20px;
    border:1px solid red;
    left:0;
    -webkit-transition:all 0.2s linear;
}
.filler{
    height:20px;
    -webkit-transition:all 0.2s linear;
}
.toggled{
    height:100px;
}

js ：

$('.banner').on('click', function(){

    $('.filler, .banner').toggleClass('toggled');
});

Fiddle

如何使用slideDown（）在其下方创建绝对定位的DIV推送内容？

1 个答案: