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

【问题标题】：Expandable CSS div not working in iOS 8可扩展的 CSS div 在 iOS 8 中不起作用
【发布时间】：2015-05-29 03:53:38
【问题描述】：

我有一些在台式计算机上运行良好的可扩展/可折叠 div（在 Chrome、Firefox 和 IE 中测试）。它们在移动设备上的 Android 版 Chrome 中也能正常工作。

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

这是控制 div 扩展的 CSS：

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

这是example。
这是full code。

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

【问题讨论】：

使用 chrome 模拟器，它们看起来不错，您能否提供一些屏幕截图，以便我们推测可能出现的问题？
@jaunt 它在我的手机上不起作用。可能与显示有关：无（stackoverflow.com/questions/3331353/transitions-on-the-display-property），但我不确定为什么这适用于桌面

【解决方案1】：

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

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

例如：

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

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

【讨论】：