CSSの色とjqueryを使用しているiOsのメニューを操作する

Question

私はjqueryとcssのメニューを持っていますが、メニューはデスクトップとブラウザで完璧に動作しています。

iOsでjqueryを使用すると問題が発生します。

誰かがiOSでこのjqueryの作業を手助けすることができますか？ Cssまたはjqueryソリューションにすることができます。

私が使用しようとした：焦点：How to recognize touch events using jQuery in Safari for iPad? Is it possible?

を私は何の成功を持っていない：アクティブますが、これはiOSの

では動作しません私もこれを試してみました。

ありがとうございました。

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

：有線行動ホバーので、それらを削除し、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>