我有一些可展开/可折叠的 div,它们在台式计算机上运行良好(在 Chrome、Firefox 和 IE 中测试)。它们在移动设备上的 Android 版 Chrome 中也能正常工作。
但是,div 不会在 iOS 8 上的任何浏览器中展开。单击标题将更改颜色并切换图标,因此我知道切换框正在工作,但 div 不可见。
这是控制 div 扩展的 CSS:
.toggle-box + label + div {
display: none;
margin-bottom: 10px;
}
.toggle-box:checked + label + div {
display: block;
}
我想我可以使用 jQuery mobile 作为替代方案,但如果可能的话我宁愿不使用任何外部库。
最佳答案
我怀疑您正在滥用相邻的同级选择器。我查看了规范,在使用三个选择器和一个伪元素之间,你正在碰运气。
幸运的是,您可以使用普通的旧兄弟选择器:~
例如:
.toggle-box ~ div {
display: none;
margin-bottom: 10px;
}
.toggle-box:checked ~ div {
display: block;
}
在这种情况下,您需要包装每个切换以防止一个输入切换所有框。这是一个 fiddle :https://jsfiddle.net/0defj7yc/1/
关于html - 可扩展的 CSS div 在 iOS 8 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30515497/