如何在iPad上通过在jQuery中单击外部来关闭菜单

Question

I got a menu that opens correctly and close correctly when you touch the menu on a iPad. thats fine, but i also want to close the menu, when you touch outside the menu. it works when you touch a picture and a link, but it doesnt work when you touch anywhere else.

here its my code:

HTML :

<nav onclick="" class="acconicon">

<nav class="accon">


 <figure class="acmlogo"></figure>


<h5 class="acconh5">Hovedmenu</h5>      
<ul class="sbm3">
    <a href="index.php"><li class="acfront">Forside </li></a>
    <a href="news.php"><li class="acnews">Nyheder </li></a>
    <a href="artists.php"><li class="acartists">Artister</li></a>
    <a href="releases.php"><li class="acreleases">Udgivelser</li></a>
    <a href="live.php"><li class="aclive">Live</li></a>
    <a href="video.php"><li class="acvideo">Videoer </li></a>
    <a href="interaction.php"><li class="accomp">Konkurrencer</li></a>
    <a href="remix.php"><li class="acremix">Remix</li></a>
</ul>


</nav>

</nav>

Script:

    $('html').click(function() {
   $('.accon').hide(); 
});

$('.acconicon').click(function(event){
     event.stopPropagation();
});

$('.acconicon').click(function(event){
     $('.accon').toggle();
});

Answer 1

I think you just need to use not selector of JQuery . I created a simple code that you should try.

$('*:not(.acconh5,sbm3,sbm3 > a)').click(function() {
    $('.accon').hide(); 
});