折叠具有位置的元素：绝对

【问题标题】：Collapse an Element with Position: Absolute折叠具有位置的元素：绝对
【发布时间】：2021-01-30 12:20:37
【问题描述】：

我正在尝试让“打开聊天”按钮显示一个绝对定位的 div，然后再次单击将其折叠。

我尝试使用组件 react-collapse 但当 div 的内容定位为绝对时它不起作用，尽管它在定位为静态/相对时有效。第一次单击将显示内容，但第二次单击不会隐藏它。为什么会这样？有谁知道该怎么做？

我希望显示绝对内容的原因是我可以将聊天框覆盖在其他内容之上，如图所示。谢谢！

【问题讨论】：

【解决方案1】：

您可以在不使用 react-collapse 的情况下实现这一点，只需使用状态变量作为组件的条件，例如 isVisisble。您需要将状态变量从导航栏传递给 ChatComponent。并在 OpenChat 上单击切换 isVisisble

<ChatComponent style={{...ur other styles , display : props.isVisisble ? 'block':'none'}} />

【讨论】：