javascript - 使用 css 颜色和 jquery 的 iO 上的触摸菜单不起作用

Question

我有一个带有 jquery 和 css 的菜单，该菜单在桌面和浏览器上运行完美，删除和添加了 current 类。

问题是当我在 iOs 上使用它时，jquery 不起作用。

有人可以帮助我使这个 jquery 在 iOS 上运行吗？可以是 Css 或 jquery 解决方案。

我试过使用 :focus :active 但这在 iOs 上不起作用

我也试过这个:How to recognize touch events using jQuery in Safari for iPad? Is it possible?

但是我没有成功。

谢谢。

CSS:

.accordion-menu {
  background-color: #f4f4f4;
  position: fixed;
  width: 50px;
  height: 100%;
}
.accordion-menu ul li {
  padding: 10px;
  border-top: 1px solid #dfdfdf;
}
.accordion-menu ul li:first-child {
  border: none;
}
.accordion-menu ul li i {
  color: #000;
}
.accordion-menu ul li i:hover {
  color: #fff;
  background-color: #0086ab;
}
.accordion-menu ul li:hover {
  background-color: #0086ab;
  color: #fff;
}

.nav {
  background-color: red;
}

.nav .fa {
  color: yellow;
}

.nav.active {
  color: black;
  background-color: blue;
}
.nav.active .fa {
  color: red;
}

js:

$('.nav').on('click', function() { 
  $(this).closest('li').toggleClass('active');
});

html:

<div class="accordion-menu">
  <ul class="" role="tabpanel">
    <li class="nav active">
      <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
        <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
      </a>
    </li>
    <li class="nav"><a class=""><i class="fa fa-search fa-2x" aria-hidden="true"></i></a></li>
  </ul>
</div>

jsfiddle: https://jsfiddle.net/gabcyff6/

Answer 1

:hover 行为有线，所以删除它们并仅使用 js

$('.nav').on('click', function(e) {
  $(this).closest('li').toggleClass('active');
});

.accordion-menu {
  background-color: #f4f4f4;
  position: fixed;
  width: 50px;
  height: 100%;
}
.accordion-menu ul li {
  padding: 10px;
  border-top: 1px solid #dfdfdf;
}
.accordion-menu ul li:first-child {
  border: none;
}
.accordion-menu ul li i {
  color: #000;
}
.nav {
  background-color: red;
}
.nav .fa {
  color: yellow;
}
.nav.active {
  color: black;
  background-color: blue;
}
.nav.active .fa {
  color: red;
}

<div class="accordion-menu">
  <ul class="" role="tabpanel">
    <li class="nav active">
      <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
        <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
      </a>
    </li>
    <li class="nav"><a class=""><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
    </li>

  </ul>
</div>