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是不可能的。您将需要JavaScript才能将单选按钮上的checked属性更改为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将始终为true，并且您将完全无法激活广播。因此，在单击onclick之前，必须先使用mousedown侦听器，以查看是否已选中该广播，以便在触发click事件时可以正确地取消选中它。

看时更容易理解，所以这里有一个小提琴，显示了我的意思。

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

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

1 个答案: