13

我正在尝试制作一个包含默认选项列表的表单，并且还可以扩展以显示几个 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之外的所有浏览器中都能完美运行。我发现一篇文章建议添加此“错误修复”，但这仅解决了我在 Dolphin 中的问题。

有没有办法让默认的 Android 浏览器也能正常工作？

4

3 回答 3

6

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

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

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

于 2014-01-30T17:25:05.457 回答
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;
}

:checkedIE8 不支持，遗憾的是这仍然很重要

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

于 2014-01-28T07:44:01.970 回答
1

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

:checked显然不适用于任何版本的Android。我不确定为什么这么多网页报告它应该可以工作（显然是从 2.1 开始），但这是错误的。

QuirksMode 的好处在于，每个功能在将其发布到 Web 之前实际上都在真实浏览器中进行了测试。

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 :( */ }
于 2014-02-04T00:54:00.777 回答