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>

Demo

此代码适用于所有浏览器，但 Android浏览器和 Dolphin 除外。我发现an article建议添加this“bugfix”，但在Dolphin中只添加fixes my problem。

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

Answer 1

您可以借助details元素实现此目的。从版本4开始，Android supports it。但是，您必须处理IE和Firefox，但幸运的是这些浏览器支持CSS3伪状态，包括:checked。

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

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

Answer 2

我不相信:checked适用于所有浏览器。我将捕获click #more事件并将其添加到父级。使用jQuery很容易。此选项适用于Android和IE8。

$("#more").on("click", toggleCheckboxes);
var toggleCheckboxes = function(evt){
  var $this = $(this);
  $this.parents("li").toggleClass("show-more-options");
  evt.preventDefault()
}



.myForm .moreOpts {
  display:none;
}
.myForm .show-more-options .moreOpts {
  display:block;
}

IE8中不支持

:checked，遗憾的是这仍然是一个大问题

https://developer.mozilla.org/en-US/docs/Web/CSS/:checked

Answer 3

http://quirksmode.org/css/selectors/mobile.html#t60

:checked显然无法在任何Android版本中使用。我不确定为什么这么多的网页报告它应该可以工作（显然是2.1以上），但这是错误的。

QuirksMode的优点在于，每个功能都会在真正的浏览器中进行测试，然后才能在网上发布。

JavaScript似乎是您最好的解决方案。我甚至会推荐javascript，因为如果用户选中“更多”框，然后选择一些额外的选项，然后取消选中“更多”框...额外的选项仍然会被“选中”，如果是用户点击“提交”按钮。每次取消选中“更多”框时，您必须取消选中这些框。唯一的方法是使用javascript。

更新： QuirksMode为:checked选择器编写了一个有缺陷的测试：

:checked {
    display: inline-block;
    width: 3em;
}

你会注意到在Android上宽度永远不会改变......但这是因为Android没有对复选框和无线电应用宽度（而桌面浏览器也是如此）。

以下可以，即使在我的Android 2.3中也是如此

:checked {
    display: inline-block;
    margin: 3em;
}

所以，正如其他评论所述，问题在于检查选择器和相邻兄弟选择器的组合：

:checked + .test { /* does not work on android :( */ }
:checked ~ .test { /* does not work on android :( */ }

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

3 个答案: