切換類以顯示/隱藏導航無法在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; 
}