如何制作:在Android浏览器上检查工作？

Question

我正在尝试制作一个包含默认选项列表的表单,并且还可以展开以显示几个exta选项.我使用以下CSS代码执行此操作:

.myForm .moreOpts {display:none;}
.myForm #more:checked +*+ .moreOpts {display:block;}

使用以下HTML:

<form action="#" class="myForm">
  <ul>
    <li>
      <input type="checkbox" id="pref-1" name="pref-1" value="1">
      <label for="pref-1">Foo</label>
    </li>
    <li>
      <input type="checkbox" id="pref-2" name="pref-2" value="2">
      <label for="pref-2">Bar</label>
    </li>
    <li>
      <input type="checkbox" id="more" name="more" value="true">
      <label for="more">More options</label>
      <ul class="moreOpts">
        <li>
          <input type="checkbox" id="pref-3" name="pref-3" value="3">
          <label for="pref-3">Baz</label>
        </li>
        <li>
          <input type="checkbox" id="pref-4" name="pref-4" value="3">
          <label for="pref-4">Qux</label>
        </li>
      </ul>
    </li>
  </ul>
</form>

演示

除了Android Browser和Dolphin之外,此代码在每个浏览器中都能完美运行.我发现了一篇建议添加这个 "bugfix" 的文章,但这只能解决我在Dolphin中遇到的问题.

有没有办法让这个工作适用于默认的Android浏览器？

Answer 1

您可以在details元素的帮助下实现此目的.Android 从版本4开始支持它.但是,你将不得不处理IE和Firefox,但幸运的是这些浏览器支持CSS3伪状态,包括:checked.

两个合并这两个,只使用不支持的浏览器中的复选框hack details.这是代码中解释的过程:http://jsfiddle.net/hF6JP/1/

编辑:这是最终的解决方案,将标签放在摘要中解决了强制复选框切换选项的问题:http://jsfiddle.net/mYdsT/