slideDown菜单栏向下滑动其他文档

Question

我使用<div>标签制作了一个菜单栏。点击它后面的<div>会向下滑动，而另外两个<div>以下的内容应保留在原位，但也会下降。

你可以在这里看到图片

正如您在此图片中看到的，当我点击向下滑动<div>时，其中的另一个<div>也会下降。如何解决？

HTML

<div id="slide">click to slide down</div>
<div id="panel">Hello! this is my first slide down example.</div>
<div>this is another div</div>

CSS

#slide{
    text-align:center;
    border:solid 1px #101010;
    width:500px;
    height:30px;
    background:#cccccc;
}
#panel{
    text-align:center;
    border:solid 1px #101010;
    width:500px;
    height:200px;
    display:none;
    background:#ff0000;
}

的jQuery

$(document).ready(function(){
  $('#slide').click(function(){
    $('#panel').stop().slideToggle(570);
  });
});

Answer 1

试试这个：

<强> HTML

<div id="menu_container">
    <div id="slide">click to slide down</div>
    <div id="panel">Hello! this is my first slide down example.</div>
</div>

<div>this is another div</div>

<强> CSS

#menu_container { position:relative; }
#panel { position:absolute; top:100%; left:0; }

Answer 2

您可以在CSS中进行一些position更改，然后将第二个<div> 放在中。 top:100%意味着你的第二个div将从你的第一个div的底部开始动画：

<强> HTML

<div id="slide">click to slide down
    <div id="panel">Hello! this is my first slide down example.</div>
</div>

<div>this is another div</div>

<强> CSS

#slide{
    text-align:center;
    border:solid 1px #101010;
    width:500px;
    height:30px;
    background:#cccccc;
    position:relative;
}
#panel{
    position:absolute;
    top:100%;
    box-sizing:border-box;
    text-align:center;
    border:solid 1px #101010;
    width:100%;
    height:200px;
    display:none;
    background:#ff0000;
}

JSFiddle

Answer 3

用此

替换您的代码

#panel{
text-align:center;
border:solid 1px #101010;
width:500px;
height:200px;
display:none;
background:#ff0000;
z-index: 10;
position: absolute;
}