Javascript 从第一个按钮下拉后移动下一个按钮

我想做的是：当我点击其中一个按钮时，段落区域显示出来（就像现在一样）。但是，我希望next按钮/div（以及它下面页面的其余部分）向下移动。简单一点：当我点击按钮时，框显示出来，同时向下移动其余按钮，这样段落区域就不会与其他区域重叠

我为糟糕的英语感到抱歉。。。 我希望你们能理解我的意思。 （顺便说一句，我不想要框架或Jquery，只需要普通语言；）

我有以下代码：

函数dropDownOne（）{
document.getElementById（“dropdownone”）.classList.toggle（“show”）；
}
函数dropDownTwo（）{
document.getElementById（“dropdowntwo”）.classList.toggle（“show”）；
}
函数dropdowntThree（）{
document.getElementById（“dropdownthree”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropdownbtn'））{
let dropDowns=document.getElementsByClassName（“下拉内容”）；
对于（变量i=0；i

.dropdownbtn{
边界：0；
背景颜色：灰色；
宽度：50%；
高度：40px；
边界半径：5px；
字体大小：15px；
颜色：黑色；
光标：指针；
-webkit转换持续时间：300ms；
-moz转换持续时间：300ms；
-ms转换持续时间：300ms；
-o-过渡持续时间：300ms；
过渡时间：300ms；
}
.dropdownbtn:悬停，.dropdownbtn:焦点{
背景颜色：蓝色；
颜色：白色；
边框：1px纯白；
-webkit转换持续时间：300ms；
-moz转换持续时间：300ms；
-ms转换持续时间：300ms；
-o-过渡持续时间：300ms；
过渡时间：300ms；
}
.下拉列表{
显示：内联块；
位置：相对位置；
利润率：10px自动；
宽度：80%；
文本对齐：居中；
}
.下拉列表：最后一个孩子{
边缘底部：20px；
}
.下拉内容{
显示：无；
位置：绝对位置；
右：0；
左：0；
背景颜色：蓝色；
宽度：80vw；
保证金：0自动；
边框：1px纯白；
边界半径：5px；
填充：10px；
z指数：1；
}
.下拉内容p{
颜色：白色；
字体大小：15px；
显示：块；
}
.表演{
显示：块；
边缘底部：200px；
}

我是谁？

Lorem ipsum dolor sit amet，奉献精英。授权共同协商委员会
除了我的阻碍之外，我的尊严是最高的
天竺葵，天竺葵。

你的技能是什么？

Lorem ipsum dolor sit amet，奉献精英。授权共同协商委员会
除了我的阻碍之外，我的尊严是最高的
天竺葵，天竺葵。

我是谁？

Lorem ipsum dolor sit amet，奉献精英。授权共同协商委员会
除了我的阻碍之外，我的尊严是最高的
天竺葵，天竺葵。

所以你的问题是你使用了

位置：绝对

在您的

下拉列表内容上，因为它有一个绝对位置，这意味着该元素将占据其位置，而不考虑任何其他元素，这就是您的其他元素没有移动的原因

为了解决这个问题，我将其更改为
位置：relative所以其他元素会考虑它的位置

我还删除了
页边距底部：200px在
show
类中，因为这会在每个元素之间留下很大的间隙

以下是在代码段中编辑的代码：


函数dropDownOne（）{
document.getElementById（“dropdownone”）.classList.toggle（“show”）；
}
函数dropDownTwo（）{
document.getElementById（“dropdowntwo”）.classList.toggle（“show”）；
}
函数dropdowntThree（）{
document.getElementById（“dropdownthree”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropdownbtn'））{
let dropDowns=document.getElementsByClassName（“下拉内容”）；
对于（变量i=0；i

.dropdownbtn{
边界：0；
背景颜色：灰色；
宽度：50%；
高度：40px；
边界半径：5px；
字体大小：15px；
颜色：黑色；
光标：指针；
-webkit转换持续时间：300ms；
-moz转换持续时间：300ms；
-ms转换持续时间：300ms；
-o-过渡持续时间：300ms；
过渡时间：300ms；
}
.dropdownbtn:悬停，.dropdownbtn:焦点{
背景颜色：蓝色；
颜色：白色；
边框：1px纯白；
-webkit转换持续时间：300ms；
-moz转换持续时间：300ms；
-ms转换持续时间：300ms；
-o-过渡持续时间：300ms；
过渡时间：300ms；
}
.下拉列表{
显示：内联块；
位置：相对位置；
利润率：10px自动；
宽度：80%；
文本对齐：居中；
}
.下拉列表：最后一个孩子{
边缘底部：20px；
}
.下拉内容{
显示：无；
位置：相对位置；
右：0；