Question

这个问题反复被问到，但是没有一个答案对我有用，所以我发布了这个问题。虽然无法在画布上运行菜单，但无法在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 transform 和 transition 。但是我已经在所有这些代码中添加了 -webkit-前缀，我想不出什么了。您可以在我的site上查看此行为。

TL; DR 画布菜单在iOS浏览器上不起作用，我认为问题出在CSS transform 和 transition 。帮我修改代码。

编辑： 变换不是问题。当我单击按钮时，导航链接就在其中，我可以单击它们。我只是看不到他们。奇怪的是，它仅发生在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>

无法在iOS浏览器中显示画布菜单

1 个答案: