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

我用

标记制作了一个菜单栏。当它被点击时，它下面的

会向下滑动，这两个

下面的另一个内容应该保留在原来的位置，但它也会向下滑动

你们可以在这里看到图片

正如您在这张图片中看到的，当我单击向下滑动

时，底部的另一个

也向下滑动。如何修复它

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>

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

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

jQuery

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

试试这个：

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>

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

<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中进行一些

位置

更改，然后将第二个

放置在第一个CSS中<代码>顶部：100%意味着你的第二个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>

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

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

---

用此代码替换您的代码

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

---

我们可以看看你的HTML/CSS吗？您可能不想将第二个div保留在页面的流中，但正在这样做。我是stackoverflow的新手，请参见此处的代码：解决方案是提供

#面板
位置：绝对
并将其放入一个容器中，容器的
位置：relative
。这样面板就不会向下移动它下面的其他内容。“框大小：边框框；”是什么意思？这里将对此进行详细说明：但是当设置为
边框框时，宽度将考虑边框和填充。