javascript - 折叠到侧面时只有标题可见的可折叠面板

Question

我正在尝试将 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 旋转到左侧。

Answer 1

使用 javascript，您将在父元素 (left-panel) 上切换类('collapsed' 或类似的东西)。然后，您将为 .left-panel.collapsed 添加额外的 css 规则，如下所示:

.left-panel.collapsed > .content {
    display: none;
}

.left-panel.collapsed {
    transform: rotate(-90deg);
}

这是用于基本旋转和隐藏内容。您可能需要一些额外的 CSS 来实现动画、大小、位置等。