如何实现点击按钮时元素显隐切换的下方内容平滑过渡效果

当然可以实现这种平滑过渡的效果！你当前的问题在于使用了display: none和display: block来切换内容的显示状态——display属性是无法触发CSS过渡动画的，所以下方的"hello"文本会瞬间位移。我们可以通过CSS的max-height + overflow: hidden配合过渡动画来实现类似Bootstrap汉堡菜单的平滑展开/收起效果。

核心思路 #

1. 放弃使用display切换显示，改用max-height控制内容的可见范围：初始时设置max-height: 0隐藏内容，展开时设置一个足够大的max-height（确保能容纳所有内容）。
2. 添加transition属性让max-height的变化产生平滑动画。
3. 用JS切换一个CSS类来控制max-height的值，保持样式和逻辑分离。

完整实现代码 #

HTML

<div id="box"> </div>
<div id="seconddiv">
  <p>whats up</p>
  <p>whats up</p>
  <p>whats up</p>
  <p>whats up</p>
  <p>whats up</p>
</div>
<p>hello</p>

CSS

#box { 
  height: 50px; 
  width: 50px; 
  background-color: red;
  cursor: pointer; /* 加上鼠标指针提示，提升交互体验 */
}
#seconddiv {
  max-height: 0; /* 初始隐藏 */
  overflow: hidden; /* 超出部分隐藏 */
  transition: max-height 0.3s ease-in-out; /* 0.3秒过渡，ease-in-out让动画更自然 */
}
#seconddiv.show {
  max-height: 300px; /* 设置一个比内容实际高度大的值，确保所有内容都能显示 */
}

JavaScript

let box = document.querySelector("#box");
let seconddiv = document.querySelector("#seconddiv");

box.addEventListener("click", () => {
  seconddiv.classList.toggle("show"); // 用toggle方法一键切换类，比判断display更简洁
});

效果说明 #

点击红色方块时，seconddiv会以平滑的动画展开/收起，下方的"hello"文本也会跟着缓慢位移，完全符合你想要的Bootstrap菜单效果。

额外优化提示 #

• 如果不确定内容的实际高度，可以把max-height设得更大一些（比如500px），不会影响动画效果。
• 如果你需要更精确的高度控制，可以用JS计算内容的实际高度，然后动态设置max-height，但对于大多数场景来说，固定一个足够大的值已经够用。

内容的提问来源于stack exchange，提问作者craftdeer