css选择器 - xpath和css




如何使:在Android浏览器上检查工作? (2)

我不会信任:checked所有浏览器。 我会捕获#moreclick事件,只是向父级添加一个类。 用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;
}

:checked IE8不支持,这是可悲的仍然是一个大问题

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

我正在尝试制作一个包含默认选项列表的表单,并且还可以展开以显示几个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 BrowserDolphin之外,这个代码在每个浏览器都能正常工作。 我找到了一篇文章 ,建议添加这个 “错误修正”,但只修复我的问题在海豚。

有什么办法可以使这个工作的默认Android浏览器呢?


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

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

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





dolphin-browser