jquery show hide funktioniert nicht in mobile

Question

Ich entwerfe eine mobile freundliche Version meiner Website und alles scheint gut zu funktionieren, aber ich kann nicht auf die Links innerhalb der div klicken, die nach dem Klick Funktion zeigt, div.

$(document).ready(function() { 

document.addEventListener("touchstart", function() {},false); 



$("#business").click(function(){ 
    $(this).addClass('on'); 
    $("#business_open").show(); 
    $("#menu_open").hide(); 
}); 

$("#menu").click(function(){ 
    $(this).addClass('on'); 
    $("#menu_open").show(); 
    $("#business_open").hide(); 
}); 

}); 

Hier HTML:

<div class="wrapper"></div> 

<div id="business"> 
    <span>Title</span> 
</div> 

    <div id="business_open"> 
    <ul> 
     <li><a href="link1.html">Link 1</a></li> 
     <li><a href="link2.html">Link 2</a></li> 
    </ul> 
    </div> 

<div id="menu"> 
    <em>m</em> 
</div> 

    <div id="menu_open"> 
    <ul> 
     <li><a class="selected" href="link1.html">Link 1</a></li> 
     <li><a href="link2.html">Link 2</a></li> 

    </ul> 
    </div> 

Answer 1

Ihre Veranstaltungen zugewiesen werden könnte vor Ende der DOM fertig geladen ist. Sie können rund um bekommen, dass von ihnen in einer jQuery-Ready-Funktion Verpackung, die eine Abkürzung davon wie folgt aussehen:

$(function(){ 
    $("#business").click(function(){ 
     $(this).addClass('on'); 
     $(".wrapper, #business_open").show(); 
     $("#menu_open").hide(); 
    }); 

    $("#menu").click(function(){ 
     $(this).addClass('on'); 
     $(".wrapper, #menu_open").show(); 
     $("#business_open").hide(); 
    }); 

    $(".wrapper").click(function(){ 
     $(".wrapper, #business_open, #menu_open").hide(); 
     $('#business, #menu').removeClass('on'); 
    }); 
});