可扩展 CSS div 在 iOS 8 中不起作用

Question

我有一些 expandable/collapsible div 可以在桌面计算机上正常工作（在 Chrome、Firefox 和 IE 中测试过）。它们在移动设备上的 Chrome 和 Android 中也能正常工作。

然而，divs 在 iOS 上的任何浏览器中都不会展开 8. 单击 headers 将更改颜色并切换图标，所以我知道切换框工作正常，但 div 不可见。

这是控制 div 扩展的 CSS：

.toggle-box + label + div {
    display: none;
    margin-bottom: 10px;
}
.toggle-box:checked + label + div {
    display: block;
}

这是一个example.
Here is the full code.

我想我可以使用 jQuery 移动作为替代方案，但如果可能的话我不想使用任何外部库。

Answer 1

我怀疑您在滥用相邻的兄弟选择器。我看了一下规范，在使用三个选择器和一个伪元素之间，你是在碰运气。

幸运的是，您可以使用普通的旧兄弟选择器：~

例如：

.toggle-box ~ div {
    display: none;
    margin-bottom: 10px;
}
.toggle-box:checked ~ div {
    display: block;
}

在这种情况下，您需要包裹每个切换开关，以防止所有框都被一个输入切换。这是 fiddle：https://jsfiddle.net/0defj7yc/1/

Expandable CSS div not working in iOS 8