Modification du code de javascript onclick tap jquery pour travailler sur mobile

Question

J'ai ce code de travail (sur le bureau):

<ul class="center" style="width:100%;margin:auto"> 
    <li id="mountain" class="mobileIcons" onclick="openLandscape()"><a class="sliderHash small-caps bold" href="#landscaping"> 
     <p class="sliderIcon icon-mountains"></p> 
     <p class="sliderText sticky">Landscaping</p></a></li> 
    <li id="apple" class="mobileIcons" onclick="openEdible()"><a class="sliderHash small-caps bold" href="#edible"> 
     <p class="sliderIcon icon-apple"></p> 
     <p class="sliderText sticky">Edible&nbsp;Accents</p></a></li> 
    <li id="android" class="mobileIcons" onclick="openPests()"><a class="sliderHash small-caps bold" href="#pests"> 
     <p class="sliderIcon icon-android"></p> 
     <p class="sliderText sticky">Pests</p></a></li> 
    <li id="shopping-cart" class="mobileIcons" onclick="openProducts()"><a class="sliderHash small-caps bold" href="#products"> 
     <p class="sliderIcon icon-shopping-cart"></p> 
     <p class="sliderText sticky">Products</p></a></li> 
    <li id="info-circled" class="mobileIcons" onclick="openInfo()"><a class="sliderHash small-caps bold" href="?info=about"> 
     <p class="sliderIcon icon-info-circled"></p> 
     <p class="sliderText sticky">About</p></a></li></ul> 

avec ce script:

function closeNav() { 
    document.getElementById("landscapeSlider").style.height = "0"; 
    document.getElementById("edibleSlider").style.height = "0"; 
    document.getElementById("pestsSlider").style.height = "0"; 
    document.getElementById("productsSlider").style.height = "0"; 
    document.getElementById("infoSlider").style.height = "0"; 
} 
function openLandscape() {closeNav(); document.getElementById("landscapeSlider").style.height = "100%"} 
function openEdible() {closeNav(); document.getElementById("edibleSlider").style.height = "100%"} 
function openPests() {closeNav(); document.getElementById("pestsSlider").style.height = "100%"} 
function openProducts() {closeNav(); document.getElementById("productsSlider").style.height = "100%"} 
function openInfo() {closeNav(); document.getElementById("infoSlider").style.height = "100%"} 

Le code ne travailler sur mobile cependant. Je suppose que c'est parce que le mobile n'a pas la fonction onclick donc j'essaye de le traduire à jquery qui ne devrait pas être trop difficile, mais je suis nouveau ...

J'ai ajouté <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> à la tête et ont

<script> 
    $(document).ready(function(){ 
    $('.mobileIcons').on('tap',function(openLandscape) {} 
    } 
</script> 

au-dessus du html. Je suis sûr que certaines parties me manquent, mais je suis perdu à propos de quoi. Une petite aide serait appréciée. (J'ai aussi essayé d'ajouter l'attribut cursor:pointer au css mais en vain. Apparemment, c'est censé être un truc pour que le onclick fonctionne.)

Answer 1

Le clic fonctionne sur les mobiles. Votre problème est que vous essayez d'utiliser appuyez sur et ne cliquez pas. Essayez ceci:

$('#mountain').click(openLandscape);