如何使用纯 CSS/JavaScript（即没有 jQuery、没有 Boostrap 等）创建可水平和垂直折叠的 HTML div？
Posted
技术标签:
【中文标题】如何使用纯 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.? 【发布时间】：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）都会展开/折叠。但是，它并没有像我最初希望的那样“向右”扩展。这就是我提出这个问题的原因。 【参考方案1】：“你可以把它想象成一个展开成大 div 的按钮。但实际上，应该展开的是整个 div，按钮只是它的一部分（在 div 内）。”
好吧，我猜你想先显示一个按钮，然后当它被点击时，水平和垂直显示一堆东西
您可以通过将父 div 的宽度和高度设置为按钮的确切尺寸来做到这一点，确保没有边距，然后设置溢出：隐藏在父级中，然后在按下按钮时，更改和高度为 100 % 或其他值，具体取决于您要显示多少东西，然后在其他小鸡点击设置尺寸回到按钮的尺寸
【讨论】：
是的，这是有道理的。我会试试这个。【参考方案2】：如果你想保持这个简单和最小化，没有花里胡哨，试试下面的代码。
<html>
<head>
<style>
.sectiondisplay: inline-block;transition: .25s;background-color: lightgray; width: auto;
.collapsible-contentheight: 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 属性。不幸的是，我无法向您展示我正在做这些可折叠/可扩展的整个网站。布局相当复杂。它利用了其他地方的“位置”属性，这使得它不适合在这个地方使用。我知道你当然不知道。还是谢谢你。以上是关于如何使用纯 CSS/JavaScript（即没有 jQuery、没有 Boostrap 等）创建可水平和垂直折叠的 HTML div？的主要内容，如果未能解决你的问题，请参考以下文章
HTML+CSS+JavaScript实现待办事项（纯DOM实现）
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器
如何用BAT判断文本中的字符串是不是为纯数字，即没有字母，并去执行两个相应的操作
我如何仅使用HTML CSS和JAVASCRIPT将Square Payment Gateway嵌入网站中？没有框架&&没有其他语言