jquery - iOS 浏览器中未显示画布外菜单

Question

这个问题在 SO 上反复被问到，但没有一个答案对我有用，所以我发布了这个。我无法让画布外菜单在 iPhone iOS 11 Safari 和 Chrome 上运行，尽管它适用于桌面和 Android 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 transform和transition。但是我已经为所有这些代码添加了-webkit-前缀，我想不出任何进一步的事情了。您可以在我的网站上查看此行为。

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

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

标签： jquerycss

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>