Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/70.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 移动菜单滚动在桌面而非移动设备上工作_Javascript_Jquery_Css_Jquery Mobile - Fatal编程技术网

Javascript 移动菜单滚动在桌面而非移动设备上工作

Javascript 移动菜单滚动在桌面而非移动设备上工作,javascript,jquery,css,jquery-mobile,Javascript,Jquery,Css,Jquery Mobile,我已经为我的网站创建了一个移动菜单,问题是菜单项很长。滚动在桌面浏览器上工作(在手机大小上测试时),但在我的iphone上,它不工作(未在android上测试) (特别是“资源”菜单项,查看其工作/不工作情况) 菜单的CSS是: .m-mobile-menu *{position:relative} .m-mobile-menu{position:fixed;top:0;left:0;width:100%;height:auto;overflow-y:scroll;opacity:0;visib

我已经为我的网站创建了一个移动菜单,问题是菜单项很长。滚动在桌面浏览器上工作(在手机大小上测试时),但在我的iphone上,它不工作(未在android上测试)

(特别是“资源”菜单项,查看其工作/不工作情况)

菜单的CSS是:

.m-mobile-menu *{position:relative}
.m-mobile-menu{position:fixed;top:0;left:0;width:100%;height:auto;overflow-y:scroll;opacity:0;visibility:hidden;transition:all 0.5s;-ms-transform:translateY(25px);-o-transform:translateY(25px);-webkit-transform:translateY(25px);transform:translateY(25px);overflow-x:hidden;z-index:-1}
.m-mobile-menu ul{padding-top:55px;z-index:99;margin:0}
.m-mobile-menu ul li.a-menu-close{position:absolute;top:0;right:0;z-index:1;background:#004067}
.m-mobile-menu ul li.a-menu-close > a{float:left;display:block;width:calc(100% - 85px);border:0;background:transparent}
.m-mobile-menu ul li.a-menu-close > a > span{font-size:160%;margin-right:15px}
.m-mobile-menu ul li.a-menu-close > a:last-child{float:right;background:#009bff;display:table;width:auto}
.m-mobile-menu ul li.a-menu-close > a:last-child > span{margin-right:0}
.m-mobile-menu li{border-bottom:1px solid rgba(0,80,117,.3);background:#fff;width:100%;margin:0;list-style:none}
.m-mobile-menu li > a,.m-mobile-menu li > span{color:#009bff}
.m-mobile-menu li:hover{background:#009bff}
.m-mobile-menu li:hover > a,.m-mobile-menu li:hover > span{color:#fff}
.m-mobile-menu li.deeper > a:after{content:"\f105";display:block;position:absolute;top:50%;right:15px;font-family:'FontAwesome';text-rendering:auto;color:#009bff;font-size:160%;margin-top:-15px;font-weight:400}
.m-mobile-menu li.deeper:hover > a:after{color:#fff}
.m-mobile-menu li > a{font-family:'open-sans',sans-serif;font-weight:700;font-size:120%;padding:24px 30px 18px;display:block;line-height:1;color:#009bff;text-decoration:none}
.m-mobile-menu li > a > i{display:none}
.m-mobile-menu .m-main-menu-child {position: fixed; top: 0; left: 0; width: 100%; opacity: 0;-webkit-transform:translateX(100%);-o-transform:translateX(100%);-ms-transform: translateX(100%);transform:translateX(100%);z-index:0;visibility:hidden;display:none;transition-delay: 0.5s; }
.m-mobile-menu .m-main-menu-child.is-open {z-index:1;opacity:1;visibility:visible;display:block;transition-delay:0s}
.m-menu-open { position:fixed;top:0;overflow:hidden; z-index: -1}
.m-mobile-menu .mobile-menu{transition:all 0.5s}
.u-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(89,89,91,.50);opacity:0;visibility:hidden;transition:0.5s all}
.m-mobile-menu .a-link-262{display:none!important}
.m-menu-open .u-overlay{opacity:1;visibility:visible;z-index:2}
.m-menu-open .content{overflow:hidden;height:100vh}
.m-menu-open .m-mobile-menu{opacity:1;visibility:visible;z-index:5000;-ms-transform:translateY(0);-o-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}
.u-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(89, 89, 91, .50); opacity: 0; visibility: hidden; transition: 0.5s all; }
.m-menu-open .u-overlay { opacity: 1; visibility: visible; z-index: 2; }
javascript是:

$('.js-toggle-menu').on("click", function(e){
    e.preventDefault();
    $('body').addClass('m-menu-open');
  });
  $('.js-close-menu').on("click", function(e){
    e.preventDefault();
    $('body').removeClass('m-menu-open');
    $('.m-mobile-menu .mobile-menu').css({
      '-webkit-transform' : 'translateX( 0 )',
      '-moz-transform'    : 'translateX( 0 )',
      '-ms-transform'     : 'translateX( 0 )',
      '-o-transform'      : 'translateX( 0 )',
      'transform'         : 'translateX( 0 )'
    }).attr('transform', 0);
  });
  $('.js-mobile-menu .js-back-child-menu').on("click", function(e){
    e.preventDefault();
    var transform = $('.m-mobile-menu .mobile-menu').attr('transform') - 100;
    $('.m-mobile-menu .mobile-menu').css({
      '-webkit-transform' : 'translateX( -' + transform + '% )',
      '-moz-transform'    : 'translateX( -' + transform + '% )',
      '-ms-transform'     : 'translateX( -' + transform + '% )',
      '-o-transform'      : 'translateX( -' + transform + '% )',
      'transform'         : 'translateX( -' + transform + '% )'
    }).attr('transform', transform);
    $(this).parent().parent().removeClass('is-open');       
  });
  $('.js-mobile-menu .js-open-child-menu').on("click", function(e){
    e.preventDefault();
    var transform = $(this).parent().attr('transform');
    $(this).parent().find('.m-main-menu-child').first().addClass('is-open');
    $(".m-main-menu-child, .m-mobile-menu").animate({ scrollTop: 0 }, 0);
    $('.m-mobile-menu .mobile-menu').css({
      '-webkit-transform' : 'translateX( -' + transform + '% )',
      '-moz-transform'    : 'translateX( -' + transform + '% )',
      '-ms-transform'     : 'translateX( -' + transform + '% )',
      '-o-transform'      : 'translateX( -' + transform + '% )',
      'transform'         : 'translateX( -' + transform + '% )'
    }).attr('transform', transform);        
  });
  $('.js-trigger-sub-menu').click(function(){
    $('.m-submenu').toggleClass('a-active');
  });
  $('.js-no-link').on('click',function(e){
    e.preventDefault();
  });

增加
高度:100%;溢出y:自动
to
.m-mobile-menu.m-main-menu-child.打开
,不幸的是,由于溢出,最后一级菜单项无法显示。