切换类以显示/隐藏导航无法在Chrome浏览器中工作4.2（v31）

Question

我有以下标记为我的导航菜单和菜单图标来切换它。

<a href="#navigation" class="toggle-menu">&#9776;</a> 
<nav id="navigation"> 
    <a href="#" class="nav-item nav-blog active">Blog</a> 
    <a href="#" class="nav-item nav-projects">Projects</a> 
    <a href="#" class="nav-item nav-showcase">Showcase</a> 
    <a href="#" class="nav-item nav-social">Social</a> 
    <a href="#" class="nav-item nav-about">About</a> 
    <a href="#" class="nav-item nav-close">&times;</a> 
</nav> 

在其所有菜单项在纵向模式下（我使用CSS媒体查询）观看在智能手机时，垂直堆叠起来。

以下是菜单项的初始样式。

nav { 
    position: fixed; 
    top: 0; 
    padding-top: 60px; 
} 

nav .nav-item { 
    display: table; 
    margin-top: 10px; 
    padding: 2px 10px 2px 10px; 
    width: auto; 
    font-size: 2.5em; 
    text-align: left; 
    margin-left: -230px; /* Keep menu items off-screen by default. */ 
    z-index: 1000; 
    -webkit-transition: margin-left 0.2s ease; 
     -moz-transition: margin-left 0.2s ease; 
     -o-transition: margin-left 0.2s ease; 
      transition: margin-left 0.2s ease; 
} 

/* Show Menu on :target or via JS */ 
nav:target .nav-item, 
nav.open .nav-item { 
    margin-left: 0; 
    transition: margin-left 0.2s ease; 
} 

现在我切换后的a.toggle-menu点击导航菜单上open类，这个工作正常，并预期在桌面上的Chrome Canary版34（DevTools设备模拟器），火狐26在Android 4.2上运行，但它是在Android上的Chrome 31以及Android上的任何其他浏览器（使用WebView）中发生意外行为。

发生了什么事是，当页面加载的第一次，我轻触菜单图标，它显示导航菜单过渡，并在关闭再次点击隐藏它，但是当我再次点击同一个菜单图标，它不没有出现，但是如果我在页面上双击（通常会放大页面1级别），会出现导航菜单（没有任何转换，就像已经存在的那样），然后轻敲隐藏它，并且这种行为会持续下去，直到我重新加载页面。

请注意，我目前正在使用jQuery 2.0.3的事件处理程序，并且这个问题仍然存在与显示/隐藏菜单，与JS，没有JS的两种方式。

任何帮助将不胜感激。

Answer 1

所以很多修修补补过这个问题后，我发现，真正的问题与WebKit的，是，我不得不给父母navposition: fixed;，理想情况下它应该工作，但不知何故，没” t，无论是Android版Chrome还是任何其他基于WebKit的Android浏览器。

所以我干脆去掉从父navposition，而是把它给.nav-items这是实际的菜单项，很明显，我不得不给不同的每个nav-itemtop值，但它的工作就像一个魅力！所以更新的CSS看起来如下所示;

/* This is no longer needed */ 
/* 
nav { 
    position: fixed; 
    top: 0; 
    padding-top: 60px; 
} 
*/ 

nav .nav-item { 
    position: fixed; 
    display: table; 
    padding: 2px 10px 2px 10px; 
    width: auto; 
    font-size: 2.5em; 
    text-align: left; 
    margin-left: -230px; /* Keep menu items off-screen by default. */ 
    z-index: 1000; 
    -webkit-transition: margin-left 0.2s ease; 
     -moz-transition: margin-left 0.2s ease; 
     -o-transition: margin-left 0.2s ease; 
      transition: margin-left 0.2s ease; 
} 

/* Need all this madness just for WebKit. */ 
.nav-item.nav-blog { 
    top: 70px; 
} 

.nav-item.nav-projects { 
    top: 140px; 
} 

.nav-item.nav-showcase { 
    top: 210px; 
} 

.nav-item.nav-social { 
    top: 280px; 
} 

.nav-item.nav-about { 
    top: 350px; 
} 

.nav-item.nav-close { 
    top: 420px; 
} 


/* Show Menu on :target or via JS */ 
nav:target .nav-item, 
nav.open .nav-item { 
    margin-left: 0; 
} 

Answer 2

尝试：

nav { 
    position: absolute; 
    top: 0; 
    padding-top: 60px; 
} 

nav .nav-item { 
    display: block; 
    margin-top: 10px; 
    padding: 2px 10px 2px 10px; 
    width: auto; 
    font-size: 2.5em; 
    text-align: left; 
    margin-left: -230px; /* Keep menu items off-screen by default. */ 
    z-index: 1000; 
    -webkit-transition: margin-left 0.2s ease; 
     -moz-transition: margin-left 0.2s ease; 
     -o-transition: margin-left 0.2s ease; 
      transition: margin-left 0.2s ease; 
} 

/* Show Menu on :target or via JS */ 
nav:target .nav-item, 
nav.open .nav-item { 
    margin-left: 0 !important; 
}