使用CSS顏色和jQuery不使用iOs的觸摸菜單

我有一個jQuery和CSS的菜單，菜單在桌面和瀏覽器上完美工作，刪除和添加類當前。使用CSS顏色和jQuery不使用iOs的觸摸菜單

問題是，當我在iOs上使用它時，jquery無法正常工作。

有人可以幫我做這個jQuery在iOS上工作嗎？可以是一個Css或jQuery解決方案。

我試着使用：重點：積極，但這不起作用在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/

來源

2016-05-31 Raduken

這是否幫助：http://stackoverflow.com/questions/10577906/how-to- make-my-click-function-work-with-ios – Dawcars

謝謝我試過這個，但我無法做出工作:( – Raduken

：懸停行爲有線，所以刪除它們，用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>

來源

2016-05-31 11:10:17

謝謝，但是這並不能解決我的問題，我需要在桌面上懸停，但懸停不能在iOs上工作 – Raduken

@Raduken使用js來檢測瀏覽器（包含ios），case not ios t母雞加載懸停效果的CSS，情況下ios使用觸摸事件來切換課程 –

使用CSS顏色和jQuery不使用iOs的觸摸菜單

回答

相關問題