如何使用纯 CSS/JavaScript（即没有 jQuery、没有 Boostrap 等）创建可水平和垂直折叠的 HTML div？答案

【问题标题】：How to create a HTML div collapsible both horizontally and vertically with pure CSS/JavaScript, i.e. no jQuery, no Boostrap etc.?如何使用纯 CSS/JavaScript（即没有 jQuery、没有 Boostrap 等）创建可水平和垂直折叠的 HTML div？
【发布时间】：2020-12-10 16:58:18
【问题描述】：

我想创建这样的东西：

https://www.w3schools.com/howto/howto_js_collapsible.asp

但它应该在垂直和水平方向上展开（和折叠）。你可以把它想象成一个展开成一个大 div 的按钮。但实际上，应该展开的是整个 div，按钮只是其中的一部分（在 div 内）。

这是一些提示性的 HTML：

<div class="section">
    <button type="button" class="collapsible">
        Open collapsible
    </button>
    <div class="collapsible-content">
        <p>Lorem ipsum...</p>
    </div>
</div>

我不仅需要扩展“collapsible-content” div，还需要扩展“section” div。加长它，同时扩大它。动画加长和加宽将是一个“必备”功能，但不是很有必要。

您能否建议适合实现此目的的 CSS 和/或 JavaScript？我不想使用任何 jQuery、Bootstrap 或类似的东西。

谢谢帕维尔

【问题讨论】：

"不仅是“collapsible-content” div，而且是“section” div” 你到底是什么意思，section div 是其中的按钮已经展开的那个？跨度>
@bluejayke，是的，对不起，你是对的。我必须更具体。我实际上使用了 w3schools 的解决方案。我将可折叠按钮和可折叠内容 div 封装到另一个 div 中（class="section"）。这在垂直扩展时可以正常工作。当您单击按钮时，整个事物（内部 div 和外部 div）都会展开/折叠。但是，它并没有像我最初希望的那样“向右”扩展。这就是我提出这个问题的原因。

标签： javascript html css expandable collapsable

【解决方案1】：

“你可以把它想象成一个展开成大 div 的按钮。但实际上，应该展开的是整个 div，按钮只是它的一部分（在 div 内）。”

好吧，我猜你想先显示一个按钮，然后当它被点击时，水平和垂直显示一堆东西

您可以通过将父 div 的宽度和高度设置为按钮的确切尺寸来做到这一点，确保没有边距，然后设置溢出：隐藏在父级中，然后在按下按钮时，更改和高度为 100 % 或其他值，具体取决于您要显示多少东西，然后在其他小鸡点击设置尺寸回到按钮的尺寸

【讨论】：

是的，这是有道理的。我会试试这个。

【解决方案2】：

如果你想保持这个简单和最小化，没有花里胡哨，试试下面的代码。

<html>
<head>
<style>
.section{display: inline-block;transition: .25s;background-color: lightgray; width: auto;}
.collapsible-content{height: 0px;overflow: hidden;}
</style>
<script>
function toggle(elem)
{
    sec=elem.parentElement;
    if(sec.style.width!='100%') sec.style.width='100%'; else sec.style.width='auto';
    coll=sec.getElementsByClassName("collapsible-content")[0];
    if(coll.style.height!='auto') coll.style.height='auto'; else coll.style.height='0px';
}
</script>
</head>
<body>
<div class="section">
    <button type="button" class="collapsible" onclick="toggle(this);">
        Open collapsible
    </button>
    <div class="collapsible-content">
        <p>Lorem ipsum...</p>
    </div>
</div>
</body>
</html>

【讨论】：

你的编码风格真的很紧凑。但它做了我想要的。谢谢”

【解决方案3】：

试一试。从该部分的背景颜色可以看出，它最初只有很小的尺寸。

点击时，我们可以向部分添加一个类，将其拉伸以覆盖整个屏幕，同时显示隐藏的内容。再次点击它会恢复。

编辑：更改了背景颜色，以便更容易看到 dev 部分如何扩展以及内容和按钮如何扩展。

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    var parent = this.parentElement;
    if (content.style.display === "block") {
      content.style.display = "none";
      parent.classList.remove("fill");
    } else {
      content.style.display = "block";
      parent.classList.add("fill");
    }
  });
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  bottom: 0;
  overflow: hidden;
  background-color: #b38686;
}

.section {
    background-color: #5128;
    width:50%;
}


.fill {
  position: absolute;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div class="section">
  <h2>Collapsibles</h2>
    <button type="button" class="collapsible">
        Open collapsible
    </button>
    <div class="content">
        <p>Lorem ipsum...</p>
    </div>
</div>

</body>
</html>

【讨论】：

我喜欢添加另一个 CSS 类的想法。这也是我打算做的。但是，我不喜欢使用 position 属性。不幸的是，我无法向您展示我正在做这些可折叠/可扩展的整个网站。布局相当复杂。它利用了其他地方的“位置”属性，这使得它不适合在这个地方使用。我知道你当然不知道。还是谢谢你。