.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>

Demo

该代码在每个浏览器中都能完美工作,Android浏览器和Dolphin除外.我发现an article建议添加this“bugfix”,但只有fixes my problem在海豚.

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