Javascript 当顶部div展开时向下移动div

我试图创建一个扩展菜单，其中每个标题控制一个链接div。事实上，我的代码中的所有内容都是由div（即标题和内容）组成的。每当我单击标题div时，content div就会增长并显示其内容。我的问题是content div将其他所有内容都推到一边。它把自己挤到中间。我想要的是一个固定的活动标题，而它下面的所有内容和它的内容被按下

$（文档）.ready（函数（）{
var$switch=1；
var$last；
//关闭抽屉。删除标题
//选择。
函数clear（）{
$（.m-title”）.removeClass（“活动”）；
$（“.drawer”）.removeClass（“打开”）；
$last=null；
}
/*•通过其标题打开/关闭抽屉。
•能够一致地打开/关闭
同一个抽屉*/
功能负载（元件）{
var$temp=element.index（）；
如果（$temp==$last）
清除（）；
否则{
清除（）；
元素。添加类（“活动”）；
element.next（）.addClass（“打开”）；
$last=element.index（）；
}
}
//侦听标题单击。
$（“.m-title”）。单击（函数（）{
加载（$（此））；
});
//执行与clear（）相同的操作，但使用//按钮。
$（“#按钮”）。单击（函数（）{
$（.m-title”）.removeClass（“活动”）；
$（“.drawer”）.removeClass（“打开”）；
});
});
正文{
背景#5959；
}
#容器{
显示器：flex；
证明内容：中心；
/*末端弯曲*/
最小宽度：350px；
宽度：65%；
高度：700px；
右边距：自动；
左边距：自动；
背景：#191919；
边框：实心1px#101010；
盒影：-1px 1px 0px 0px#555；
}
#m-wrap{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
自对准：居中；
/*末端弯曲*/
最小宽度：300px；
最大宽度：500px；
宽度：65%；
高度：自动；
边框：实心1px红色；
颜色：小麦；
}
m-title{
显示器：flex；
证明内容：中心；
自对准：居中；
/*末端弯曲*/
宽度：100%；
边框：实心1px黑色；
过渡：.5s；
}
.m-标题：悬停{
背景：rgba（60,60,60,0.5）；
光标：指针；
过渡：.5s；
}
.m-title：活动{
背景：rgba（75,75,75,0.5）；
转换：.1s；
}
.m-标题跨度{
自对准：居中；
/*末端弯曲*/
字体系列：无衬线；
字体大小：24px；
填充：24px；
}
.m-title.active{
背景：rgba（160,60,60,0.5）；
/*突出显示活动标题*/
}
.抽屉{
高度：0px；
/*关闭抽屉*/
宽度：100%；
边框：实心1px绿色；
自对准：居中；
过渡：.5s；
}
.抽屉打开{
高度：100px；
位置：相对位置；
过渡：.5s；
}
#钮扣{
显示器：flex；
证明内容：中心；
宽度：75px；
高度：50px；
背景：绿色；
}
#按钮：悬停{
光标：指针；
}
#按钮跨度{
自对准：居中；
}

站点地图
关于
员工服务
服务
清楚的
要使其向下推，请在css中更改此选项：

#m-wrap {
  display: flex;
  flex-direction: column;
  /* justify-content: center;          commented out   */
  /* align-self: center;               commented out   */

已评论请求的更新

要使其在容器中居中，可以执行以下操作：

#container {
  display: flex;
  justify-content: center;
  /*End FLEX*/

  min-width: 350px;
  width: 65%;
  /* height: 700px;             commented out   */
  padding: 100px 0;         /*  added padding   */

只需删除或更改div id=“container”的display属性。
您可以使用css或jquery为该div指定位置。
您的两个“父”或“容器”div在css中居中。这就是为什么它们居中，并且子div（菜单）也居中的原因。至于是否应该使用所有div标记，您应该尝试使用这些标记，但这实际上取决于您的实现需要。@wahwah我知道它们是集中的。这就是我想要它们的方式，除非这与为什么我点击它们时它们不会保持静止有关。这非常有效。有没有关于如何再次将整个事情集中的建议？@blutuu用一种方法更新了我的答案。