Javascript 在滑入另一个div后，如何阻止中间div改变位置？

我正在创建一个带有

和

的简单页面。在

部分

我有3个div，我用

display:flex定位它们和
对正内容：之间的空格

问题是我还在其中两个（极端的）上使用了JS
slideToggle（）
。它正在改变我的中心分区的布局。我该如何做才能使我的中心div在其中一个向上滑动后不会改变位置


$（文档）.ready（函数（）{
$（“#播放列表”）。单击（函数（）{
$（'#nav'）。滑动切换（）；
});
});
$（文档）.ready（函数（）{
$（“#歌曲”）。单击（函数（）{
$（“#listSongs”）.slideToggle（）；
});
});
部分{
显示器：flex；
证明内容：之间的空间；
}
#列表歌曲{
边缘顶部：50px；
高度：550px；
背景色：黑色；
边界半径：5px；
字体大小：25px；
宽度：200px；
}
#歌曲列表{
边缘顶部：5px；
宽度：200px；
文本对齐：居中；
溢出：隐藏；
高度：35px；
线高：50px；
颜色：白色；
}
#玩家{
颜色：红色；
}
#导航{
边缘顶部：50px；
高度：550px；
背景色：黑色；
边界半径：20px；
宽度：200px；
}
.隐藏{
边缘顶部：50px；
高度：550px；
背景色：黑色；
边界半径：20px；
宽度：200px；
可见性：隐藏；
}
#导航p{
文本对齐：居中；
}
#导航ul{
列表样式类型：无；
文本对齐：左对齐；
}

作者：

某物

某物

问题是因为当
滑动按钮
/
向下滑动
/
滑动切换
方法完成时，它们会在目标元素上设置
显示：无
。这就是导致页面布局发生变化的原因

要解决此问题并改进动画，可以改用CSS。使用
transition
属性设置
height
设置的动画。然后可以切换一个类，该类在目标元素上设置
高度：0
。试试这个：


$（文档）.ready（函数（）{
$（“#播放列表”）。单击（函数（）{
$（'#nav'）。toggleClass（'hide'）；
});
$（“#歌曲”）。单击（函数（）{
$（“#listSongs”）.toggleClass（'hide'）；
});
});
body{背景色：#CCC；}
部分{
显示器：flex；
证明内容：之间的空间；
}
截面>分区面板{
边缘顶部：50px；
高度：550px；
背景色：黑色；
边界半径：5px；
字体大小：25px；
宽度：200px；
过渡段：高度0.4s；
溢出：隐藏；
}
截面>div.panel.hide{
身高：0；
}
截面>分区面板p{
边缘顶部：5px；
宽度：200px；
文本对齐：居中；
溢出：隐藏；
高度：35px；
线高：50px；
颜色：白色；
}
#玩家{
颜色：红色；
}
#导航{
边界半径：20px；
}

播放列表
歌曲
作者：

同侧眼睑

某物

某物