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

Posted 2023-03-24

【中文标题】折叠具有位置的元素：绝对

【英文标题】：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' />

【讨论】：

组件隐藏后如何卸载，可见后如何重新安装？

在这种情况下，我实际上会像这样基于 isVisisble 渲染 ChatComponent，``` isVisisble ? :null``` 就可以了。