我正在尝试将 Panel 创建为内部有两个 div(标题和内容)的 div。 类似的东西:
<div class="left-panel">
<div class="title">
<span>title<span>
</div>
<div class="content">
<span>some content</span>
</div>
</div>
我想在点击箭头后折叠这个面板。折叠后它应该只是左侧的一个窄条,因此旁边的其他面板可能更宽。它应该像这张图片:https://imgur.com/a/NG8qYYe 像那样的东西。我在使用 CSS 时遇到问题,应该编写它才能使其正常工作。我应该怎么做才能让它看起来像那样?我的意思是这里只让内容部分消失,并以某种方式将整个面板和带有文本的标题 div 旋转到左侧。
最佳答案
使用 javascript,您将在父元素 (left-panel
) 上切换类('collapsed
' 或类似的东西)。然后,您将为 .left-panel.collapsed
添加额外的 css 规则,如下所示:
.left-panel.collapsed > .content {
display: none;
}
.left-panel.collapsed {
transform: rotate(-90deg);
}
这是用于基本旋转和隐藏内容。您可能需要一些额外的 CSS 来实现动画、大小、位置等。
关于javascript - 折叠到侧面时只有标题可见的可折叠面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53881068/