切换侧面板时调整列大小答案

【问题标题】：Resizing columns when a side panel is toggled切换侧面板时调整列大小
【发布时间】：2019-11-04 15:22:26
【问题描述】：

我采用了简单的 CSS 样式，将一行分成 12 列。

我正在尝试制作三个面板：侧边栏（展开时应占用左侧 3 列，收缩时应占用 0 列）、切换面板（应占用 1 列）和内容面板（应该占据 11 列）

当我按下切换按钮时，侧边栏应该变得可见，并且切换和内容面板应该缩小以适应这种扩展（而不是像当前那样移动到新行，因为现在的总列数大于 12 ）。我怎样才能做到这一点？

编辑

下面是一段代码：

function openSidebar() {
  console.log("openSideBar()");
  if ($("#sidebar").is(":visible")) {
    $("#sidebar").hide();
  } else {
    $("#sidebar").show();
  }
}

* {
  box-sizing: border-box;
  margin: 0;
}

[class*="col-"] {
  float: left;
  padding: 2vh;
  width: 100%;
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

.row::after {
  clear: both;
  content: "";
  display: table;
  height: auto;
}

<!DOCTYPE html>
<html lang="en">

  <head>
  </head>
    
  <body>
  
    <div class="row">

      <div id="sidebar" class="col-3" hidden style="background-color: green;"> here is the content of a sidebar that slides to the right</div>

      <div class="col-1" style="background-color: yellow;">
        <button onclick="openSidebar();">toggle</button>
      </div>

      <div class="col-11" style="background-color: red;">
      this panel should shrink when the sidebar is expanded.
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

</body>

【问题讨论】：

您好，请尝试为此提供一个 stackblitz 应用程序，以便我们了解您现在的体验。
@Rich 我添加了一个代码 sn-p。我基本上不希望红色的“内容”面板移动到新行，而是让红色和黄色面板收缩，以便在切换时为绿色面板留出空间。

标签： javascript html css resize

【解决方案1】：

使用 jquery animate 函数来切换侧边栏。为侧边栏使用自定义类而不是 col-3

function openSidebar() {
      $("#sidebar").animate({
      width: "toggle"
    });
  }

body {
  padding:0;
  margin:0;
}
.row {
  display:flex;
}    
.test {
  width:25%;
}
.col-1 {
  width:8.33%;
  overflow:hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<div class="row">

  <div id="sidebar" class="test"  style="background-color: green;"> here is the content of a sidebar that slides to the right</div>

  <div id="toggle" class="col-1" style="background-color: yellow;">
    <button onclick="openSidebar();">toggle</button>
  </div>

  <div id="content" class="col" style="background-color: red;">
    this panel should shrink when the sidebar is expanded rather than move to a new line. Width auto
  </div>

</div>

【讨论】：

谢谢——这几乎可以完美运行！但是，(1) 是否可以不使用引导程序 (<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>) 和 (2) 如果在 <div id="content"> 中嵌入 <div class="row">，如果不包含引导程序，则它不起作用。