不在iOS浏览器中显示的画布外菜单

Question

这个问题在SO上反复询问，但没有一个答案适合我，所以我发布了这个。 虽然它可以在桌面和Android Chrome上运行，但我无法在iPhone iOS 11 Safari和Chrome上使用非画布菜单。

 $('#nav-header .nav-collapse-btn').on('click',function(){ $('#main-nav').toggleClass('nav-collapse'); }); 

 #main-nav { position: fixed; top: 0; left: 0; bottom: 0; max-width: 100%; width: 0%; margin-left: 0; padding-top: 30px; overflow-x: hidden; overflow-y: auto; background: #07090c; -webkit-box-shadow: 5px 0px 6px -5px rgba(0, 0, 0, 0.4); box-shadow: 5px 0px 6px -5px rgba(0, 0, 0, 0.4); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 0.2s all; transition: 0.2s all; z-index: 99; } #main-nav.nav-collapse { width: 100%; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="nav-header"> <div class="navbar navbar-expand-md"> <nav id="main-nav"> <ul class="main-nav nav navbar-nav flex-nowrap"> <li><a href="#" class="nav-link">...</a></li> ... </ul> </nav> </div> <button class="nav-collapse-btn">...</button> </div> 

我尝试过：将“ touchstart ”事件添加到折叠按钮但不起作用。

所以我认为问题在于css 转换和转换 。 但我已经为所有这些代码添加了-webkit-前缀，我想不出任何进一步的事情。 您可以在我的网站上查看此行为。

TL; DR Off-canvas菜单在iOS浏览器上不起作用，我认为问题在于css 转换和转换 。 帮我修改代码。

编辑：这不是转换的问题。 当我点击按钮时，导航链接就在那里，我可以点击它们。 我只是没有看到他们。 奇怪的是它只发生在iOS Safari上。

Answer 1

你能试试这段代码吗？ 我检查了网站，因为你使用单独的关闭按钮来关闭菜单，你不需要使用toggleClass ，而是在jQuery本身中给出css转换。

 $('.nav-collapse-btn').click(function() { $('#main-nav').css({ 'transform': 'translateX(0)' }); }); $('.nav-close-btn').click(function() { $('#main-nav').css({ 'transform': 'translateX(-100%)' }); }); 

 #main-nav { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; margin-left: 0; padding-top: 30px; background: #07090c; -webkit-box-shadow: 5px 0px 6px -5px rgba(0, 0, 0, 0.4); box-shadow: 5px 0px 6px -5px rgba(0, 0, 0, 0.4); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: 0.2s all; transition: 0.2s all; z-index: 99; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="nav-header"> <div class="navbar navbar-expand-md"> <nav id="main-nav"> <ul class="main-nav nav navbar-nav flex-nowrap"> <li><a href="#" class="nav-link">Link</a></li> <li><a href="#" class="nav-link">Link</a></li> <li><a href="#" class="nav-link">Link</a></li> </ul> <button class="nav-close-btn">Close</button> </nav> </div> <button class="nav-collapse-btn">Open</button> </div>