javascript - 可折叠面板和空间填充

Question

我有一个包含另外三个 div 的 div。第一个是可以折叠的工具栏(示例中为红色)。它有一个固定的高度。第二个(黑色)必须填满所有剩余空间，并且如果红色一个被折叠则必须展开。第三个(绿色)实际上是一个附在红色 div 底部的按钮。当用户点击它时，它会折叠或展开红色 div。

<div id="container">
  <div id="tools">
  </div>
  <div id="hider">
  </div>
  <div id="work-area">
  </div>
</div>

我在 jsfiddle 上做了一个例子:https://jsfiddle.net/gpoa8s92/3/

我不知道如何让黑色 div 占用所有剩余空间。我尝试使用 flexbox，它可以工作，但绿色 div 不再附加到红色 div 的底部。

是否有尽可能少使用 ass javascript 的解决方案？

谢谢!

Answer 1

我认为您的解决方案可以通过 flexbox 实现，只需将工具和工作区作为 sibling ，并首先设置静态 height、flex-grow: 0 和 flex shr​​ink: 0，工作区设置 height: 100%, flex-grow: 1 和 flex shr​​ink: 1。这将使工具占用 100px 和工作区剩余空间。

由于切换按钮是工具的一部分，您可以将它放在里面，然后使用 position: absolute 和 top: 100% 将它移到外面，并给 tools position: relative 将切换按钮固定在其底部。

现在您可以为设置其 height: 0 的工具创建一个类，并使用 CSS 转换为其设置动画。

然后单击切换按钮，您可以在工具上切换一个类，它应该是您想要的。

切换工具高度可以在没有 javascript 的情况下完成——这会有点困惑但更易于访问，这里是一个例子:https://codepen.io/morganfeeney/pen/KiBty

为您准备了一个示例 - 我使用 BEM 方法来命名元素并将使用过的元素缓存为变量。

const $toggleButton = $('.js-tools-toggle');
const $toggleContent = $('.js-tools-root');
const collapsedClass = 'tools--collapsed';
$toggleButton.on('click', function() {
  $toggleContent.toggleClass(collapsedClass);
})

.container {
  display: flex;
  flex-direction: column;
  height: 400px;
  background-color: blue;
}

.tools {
  transition: height 250ms ease-in-out;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100px;
}

.tools--collapsed {
  height: 0px;
}

.tools__content {
  height: 100%;
  background-color: green;
  overflow: hidden;
}

.tools__action {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  height: 20px;
  background-color: red;
}

.work-area {
  background-color: black;
  flex: 1 1 auto;
  height: 100%;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="tools js-tools-root">
    <div class="tools__content"> Content of tools</div>
    <div class="tools__action js-tools-toggle">
    toggle
    </div>
  </div>
  <div class="work-area">
    content of work area
  </div>
</div>