html - 可扩展的 CSS div 在 iOS 8 中不起作用
<p><p>我有一些在台式计算机上运行良好的可扩展/可折叠 div(在 Chrome、Firefox 和 IE 中测试)。它们在移动设备上的 Android 版 Chrome 中也能正常工作。</p>
<p>但是，在 iOS 8 上的任何浏览器中，div 都不会展开。单击标题会更改颜色并切换图标，所以我知道切换框正在工作，但 div 不可见。</p>
<p>这是控制 div 扩展的 CSS:</p>
<pre><code>.toggle-box + label + div {
display: none;
margin-bottom: 10px;
}
.toggle-box:checked + label + div {
display: block;
}
</code></pre>
<p>这里是 <a href="http://cmckenzie6.github.io/ColinMcKenzie/expandable.html" rel="noreferrer noopener nofollow">example</a> .<br/>这里是<a href="http://cmckenzie6.github.io/ColinMcKenzie/expandable.txt" rel="noreferrer noopener nofollow">full code</a> .</p>
<p>我想我可以使用 jQuery mobile 作为替代方案，但如果可能的话，我宁愿不使用任何外部库。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>我怀疑您在滥用相邻兄弟选择器。我看了一下规范，在使用三个选择器和一个伪元素之间，你很幸运。</p>
<p>幸运的是，您可以使用普通的旧同级选择器:<code>~</code></p>
<p>例如:</p>
<pre><code>.toggle-box ~ div {
display: none;
margin-bottom: 10px;
}
.toggle-box:checked ~ div {
display: block;
}
</code></pre>
<p>在这种情况下，您需要包装每个切换，以防止所有框被一个输入切换。这是一个 fiddle :<a href="https://jsfiddle.net/0defj7yc/1/" rel="noreferrer noopener nofollow">https://jsfiddle.net/0defj7yc/1/</a> </p></p>
<p style="font-size: 20px;">关于html - 可扩展的 CSS div 在 iOS 8 中不起作用，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/30515497/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/30515497/
</a>
</p>
页:
[1]