javascript - Resizer 扩展和最小化 div

Question

我想并排制作 3 个 div，当单击一个按钮同时折叠另一个时，每个 div 都可以扩展到全屏(但仍以垂直方向显示标题)。类似于 CodePen做过。这是他们页面中的样子。 最初它并排显示 3 个大小相等的 div。当您双击侧面的调整器时，它会展开一个 div 并折叠另一个，但折叠的 div 不会完全隐藏。 我试图检查他们的页面源代码，发现这一行代码。

<div class="editor-resizer html-editor-resizer" title="Double-click to expand."></div>
<div id="box-html" class="box box-html" data-type="html">
   <div class="powers">
      <div class="powers-drag-handle" title="Double-click to expand."></div>
      <div class="editor-actions-left">
         <button id="settings-pane-html" class="button button-medium mini-button settings-nub" data-type="html" title="Open HTML Settings">
            <svg class="icon-gear" width="10" height="10">
               <use xlink:href="#gear"></use>
            </svg>
         </button>
         <h2 class="box-title html-editor-title" id="html-editor-title"><span class="box-title-name">HTML</span></h2>
      </div>
   </div>
   <div class="code-wrap">
      <pre id="html" class="code-box" aria-labeledby="html-editor-title">
         <code>

         </code>
      </pre>
      <div class="error-bar" id="error-bar-html">
         <span class="error-icon" data-type="html">
         !
         </span>
      </div>
   </div>
</div>

但我找不到任何与此行为相关的 javascript 或 css。我怎样才能做到这一点？ jQuery 或 Bootstrap 是否有针对此类组件的插件？还是我必须从头开始创建？

Answer 1

您可以先做您自己的最小示例，例如下面您可以改进的示例。我认为这比尝试重现像代码笔这样的复杂代码要好:

它在悬停时有效，但您可以使用一些 JS 轻松地在点击时实现

.container {
  display: flex;
  height: 200px;
}

.container>div {
  flex: 1;
  background: 
    linear-gradient(red, red) left/15px 100% no-repeat, 
    blue;
  padding-left: 15px;
  color: #fff;
  transition: 0.5s all;
}

.container:hover>div {
  min-width: 15px;
  padding: 0;
  flex: 0;
  writing-mode: vertical-lr;
}

.container>div:hover {
  flex: 1;
  padding-left: 15px;
  writing-mode: initial;
}

<div class="container">
  <div>HTML</div>
  <div>CSS</div>
  <div>JS</div>
</div>