android - 输入 :checked ~ div. 子菜单 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');
    } 
  });
});