输入：checked~div.submenu Android浏览器4.4.2

Question

以下代码无法在Android浏览器上运行。 4.4.2

HTML

<ul><li>
       <input id="check-1" type="checkbox" name="menu"/>
       <label for="check-1">☰</label>
       <div class="submenu">content</div>
    </li></ul>

CSS

input:checked ~ div.submenu{
  min-height:200vh;
  height:auto;
  transition:max-height 0.5s ease-in;
  z-index:9999;
  background-color:#f4f4f4;
}

此处的完整代码https://jsfiddle.net/erickb/3tsbp752/ 谢谢你的帮助

Answer 1

没有直接用CSS解决，jquery为旧浏览器添加

$(document).ready(function () {
  $(document).on('change', 'input[id="check-menu"]', function (e) { 
    if($('#check-menu').prop('checked')) {
      $('#submenu-main').addClass('old-show');
    } else {
      $('#submenu-main').removeClass('old-show');
    } 
  });
});