仅CSS手风琴-如何折叠内容

Question

我按照这个CodePen创建一个纯css手风琴。我喜欢屏幕右边的箱子。它使用类型为radio的输入打开和关闭选项卡内容。我想修改它，这样当你点击打开的选项卡时，内容可以折叠。目前，你只能通过打开另一个选项卡来折叠它，我想保留这个功能。但我也想通过直接点击它来关闭它。一次只能打开一个选项卡，或者根本不打开。

我试着在这样的选项卡内容中添加默认的最大高度0，但这并没有起到多大作用，我认为这是多余的：

.tab input ~ .tab-content {
max-height: 0;
}
/* :checked */
.tab input:checked ~ .tab-content {
max-height: 100vh;
}

有什么建议吗？

编辑：我意识到我不能折叠它的原因是因为单选按钮的默认行为不允许我只需点击它们就可以"取消选中"它们。但这个手风琴之所以能以我想要的方式工作(打开时关闭其他选项卡(，是因为它使用的是单选输入，而不是复选框输入。因此，我的解决方案必须两全其美，也许可以使用javascript在单击时取消选中单选按钮。然而，我试图将其作为一个纯粹的CSS手风琴。仍然不知所措。。。

Answer 1

这在纯CSS中是不可能的。如果单击单选按钮时已选中checked属性，则需要javascript将其更改为false。

Javascript示例：

var radios = document.querySelectorAll('input[type="radio"]');
for(i=0; i<radios.length; i++ ) {
radios[i].onmousedown = function() {
let checked = this.checked;
this.onclick = function() {
if (checked) {
this.checked = false;
}
}
}
}

jQuery示例：

$('input[type="radio"]').on('mousedown', function() {
let checked = this.checked;
$(this).on('click', function() {
if (checked) {
this.checked = false;
}
})
})

单选按钮的工作方式是，它们只更改onclick而不更改onmouseup，并且在触发onclick时，checked属性将已设置为true。因此，如果你只有一个onclick的监听器，checked将始终为真，你将根本无法激活收音机。因此，在onclick之前，mousedown侦听器是必要的，以查看单选是否已经被选中，以便在触发click事件时可以正确地取消选中它。

当你看到的时候会更容易理解，所以这里有一把小提琴来展示我的意思。

http://jsfiddle.net/d6uLqy0c/4/