jquery - 表格单元格侧边栏不折叠(动画宽度)

Question

编辑:由于下面的答案适用于示例，但不适用于我的实际站点，因此我将该站点变成了 JSFiddle。我不知道它们会有什么不同，但一定有一些我忽略的地方。

https://jsfiddle.net/spikespaz/25bnqpoe/

原文:

我无法设置侧边栏的动画以使其关闭，因为 display: table-cell 没有响应小于内容要求的宽度变化，即使溢出和文本换行也是如此。

jQuery 的 *.toggle() 可以正常工作，但我不喜欢它的动画方式。因此，我尝试创建自己的类以在 jQuery 切换时更改侧边栏的宽度，但它实际上从未像普通 block div 那样自行折叠。

我想我必须在父级上使用 display: table 并在子级(内容和侧边栏)上使用 display: table-cell 以使侧边栏具有相同的高度作为内容。

问题当然是宽度。我无法为它制作动画；它甚至不会改变摆在首位。但如果没有它，侧边栏就不会延伸到底部。

我不知道该怎么做，有什么建议吗？ (我想尽可能避免额外的 JavaScript。)

这是一个供您 fork 的快速示例:https://jsfiddle.net/spikespaz/fr0gpmwf/

以及用于显示的代码片段:

const close = $("#close");
const sidebar = $("#sidebar");

close.click(() => {
  close.toggleClass("closed");
  sidebar.toggleClass("closed");
});

h3 {
  margin: 0;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(190, 190, 190);
  height: 50px;
}

#close {
  float: right;
  transition: transform 500ms;
}

#close.closed {
  transform: rotate(180deg);
}

#main {
  display: table;
  width: 90%;
  margin: 0 auto;
}

#content {
  display: table-cell;
  background: rgb(220, 220, 220);
}

#sidebar {
  display: table-cell;
  width: 100px;
  background: rgb(160, 160, 160);
  white-space: nowrap;
  overflow-x: hidden;
  transition: width 500px;
}

#sidebar.closed {
  width: 0;
}

#footer {
  display: flex;
  align-items: center;
  background: rgb(190, 190, 190);
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="header">
  <h3>This is a header!</h3>
  <button id="close">Close</button>
</div>

<div id="main">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa turpis, fermentum ac cursus sed, fringilla iaculis dui. Nam tempus dolor pellentesque placerat sodales. Praesent a tortor posuere, fringilla neque eget, aliquet nibh. Aliquam eget
      odio id nibh blandit faucibus sit amet sed mi. Nullam at lacus pulvinar dolor euismod facilisis. Curabitur cursus velit tellus, ut vestibulum lorem viverra quis. Ut ipsum lacus, laoreet molestie dolor id, efficitur cursus lorem. Aliquam sed euismod
      nulla, sit amet facilisis lectus. Quisque vel nibh consectetur, commodo orci ut, mattis lectus. Donec id dolor id metus mattis faucibus. In hac habitasse platea dictumst. Etiam scelerisque sem a nisi varius varius. Integer erat nulla, semper et
      arcu eget, laoreet ornare metus. Fusce lobortis lacinia urna a mollis. Morbi quis ipsum sed quam placerat consectetur.</p>

    <p>Sed euismod finibus ornare. Praesent aliquam nunc tincidunt enim vehicula, bibendum auctor odio dapibus. Maecenas ultrices nisi velit. Ut blandit magna quis facilisis porttitor. Curabitur hendrerit quam eget vulputate suscipit. Ut odio mauris, posuere
      quis viverra vitae, lobortis finibus erat. Maecenas dictum justo et risus pharetra, eu pharetra arcu porta. Quisque nec hendrerit sem, eu euismod lorem. Phasellus sed purus non velit ullamcorper luctus. Nulla ac sem eget quam condimentum dictum
      eu sed odio. Duis ut laoreet est, maximus porttitor mi. Vestibulum et lacus sapien. Quisque at arcu quis nisi sagittis luctus. Praesent varius rhoncus condimentum.</p>
  </div>
  <div id="sidebar">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
    </ul>
  </div>
</div>

<div id="footer">
  <h3>This is a footer!</h3>
</div>

谢谢。

Answer 1

您正在父级上使用 flex，您不需要使用 display: table-cell。 flex 子项的默认对齐方式是 stretch，这将使它们具有相同的高度。

const close = $("#close");
const sidebar = $("#sidebar");

close.click(() => {
  close.toggleClass("closed");
  sidebar.toggleClass("closed");
});

h3 {
  margin: 0;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #bebebe;
  height: 50px;
}

#close {
  float: right;
  transition: transform 500ms;
}
#close.closed {
  transform: rotate(180deg);
}

#main {
  display: flex;
  margin: 0 auto;
  width: 90%;
}

#content {
  background: gainsboro;
  flex: 1 0 0;
}

#sidebar {
  width: 100px;
  background: #a0a0a0;
  white-space: nowrap;
  overflow-x: hidden;
  transition: width 1s;
}
#sidebar.closed {
  width: 0;
}

#footer {
  display: flex;
  align-items: center;
  background: #bebebe;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h3>This is a header!</h3>
  <button id="close">Close</button>
</div>

<div id="main">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa turpis, fermentum ac cursus sed, fringilla iaculis dui. Nam tempus dolor pellentesque placerat sodales. Praesent a tortor posuere, fringilla neque eget, aliquet nibh. Aliquam eget
      odio id nibh blandit faucibus sit amet sed mi. Nullam at lacus pulvinar dolor euismod facilisis. Curabitur cursus velit tellus, ut vestibulum lorem viverra quis. Ut ipsum lacus, laoreet molestie dolor id, efficitur cursus lorem. Aliquam sed euismod
      nulla, sit amet facilisis lectus. Quisque vel nibh consectetur, commodo orci ut, mattis lectus. Donec id dolor id metus mattis faucibus. In hac habitasse platea dictumst. Etiam scelerisque sem a nisi varius varius. Integer erat nulla, semper et
      arcu eget, laoreet ornare metus. Fusce lobortis lacinia urna a mollis. Morbi quis ipsum sed quam placerat consectetur.</p>

    <p>Sed euismod finibus ornare. Praesent aliquam nunc tincidunt enim vehicula, bibendum auctor odio dapibus. Maecenas ultrices nisi velit. Ut blandit magna quis facilisis porttitor. Curabitur hendrerit quam eget vulputate suscipit. Ut odio mauris, posuere
      quis viverra vitae, lobortis finibus erat. Maecenas dictum justo et risus pharetra, eu pharetra arcu porta. Quisque nec hendrerit sem, eu euismod lorem. Phasellus sed purus non velit ullamcorper luctus. Nulla ac sem eget quam condimentum dictum
      eu sed odio. Duis ut laoreet est, maximus porttitor mi. Vestibulum et lacus sapien. Quisque at arcu quis nisi sagittis luctus. Praesent varius rhoncus condimentum.</p>
  </div>
  <div id="sidebar">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
    </ul>
  </div>
</div>

<div id="footer">
  <h3>This is a footer!</h3>
</div>