Javascript 切换类以显示/隐藏在Android 4.2（v31）的Chrome中不起作用的导航

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

<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>

现在我在nav菜单上点击

a.toggle-menu

，切换

open

类，这很好，正如桌面上的Chrome Canary 34（DevTools设备仿真器）和安卓4.2上运行的Firefox 26所预期的那样，但在安卓上的Chrome 31以及安卓上的任何其他浏览器（使用WebView）中，这都会产生意想不到的行为

当第一次加载页面时，我点击菜单图标，它会显示带过渡的导航菜单，再次点击关闭会隐藏它，但当我再次点击相同的菜单图标时，它不会显示，但如果我双击页面（通常在页面1级放大），导航菜单会出现（没有任何转换，就像它已经存在一样），然后点击close会隐藏它，这种行为一直持续到我再次重新加载页面为止

请注意，我目前正在使用jQuery 2.0.3作为事件处理程序，这个问题仍然存在于显示/隐藏菜单、使用JS和不使用JS的两种方式中

任何帮助都将不胜感激。

请尝试：

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;
}

---

因此，在对这个问题进行了大量的修补之后，我发现WebKit的真正问题在于，我将

位置：修复；

交给了家长

nav

，理想情况下它应该可以工作，但不知怎的，它没有工作，无论是在Chrome for Android还是在Android上运行的任何其他基于WebKit的浏览器中

因此，我简单地从父

nav

中删除了

position

，而是将它交给了

。nav items

是实际的菜单项，显然，我必须为每个

nav item

赋予不同的

top

值，但它起到了很好的作用！因此更新后的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;
}

---

这没有帮助，此外，我希望菜单即使在页面滚动时也是固定的，所以

position:absolute

for

nav

不能使用。

/* 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;
}