[Résolu] Double touch indésirable pour déplier menu.

Bonjour,

je n'arrive pas à comprendre d'où viens mon bug.
Sur smartphone lorsqu'on visite mon site:
http://www.casalonga.com

j'ai un menu replié qui se déplie au touch. Jusque là tout va bien.
En revanche j'ai dedans des sous_menu, qui devrais aussi apparaitre au touch; Mais pour eux impossible sans toucher deux fois d'affiler au même endroit.

Et si on touch ailleurs entre temps on perd la possibilité de deplier le sous menu. Comme si le premier touch permettait d'obtenir un focus sur un element avant de pouvoir vraiment l'activer.

Le plus étrange c'est que une fois cliquer sur un des sous menu, si on essai de cliquer sur un autre lien qui normalement marche nickel , par exemple le lien du logo. Bah pareil il faudra recliquer une deuxième fois sur le logo pour obtenir le lien.

J'ai cru un moment que c'était lié à mes class :hover ; mais je les ai toutes placé derrière une class .no_touch donc normalement elle ne devriat plus intervenir, c'est donc autre chose.
Est ce que cela pourrait être lié à une histoire de flux sachant que le menu est fixed ? Mais ca me paraît étrange...

Merci d'avance !

Mon script:

//--Menu deroulant clickable smartphone--		
   if (document.documentElement.clientWidth < 831) {
   $('#deplie_menu').on('click', function() {
		$('#principal').slideToggle(function() {
			// Animation complete.
		});
	});
    	$(".has_sub").css('cursor','pointer').on('click', function() {
	$(this).children('.sub').slideToggle();}
	 );
	};

Et ma structure html:

<div id="deplie_menu" class="lien">
<span class="icone" data-icon="&#xe6b2"></span>
</div>
<nav id="principal">
<ul id="menu_princ" class="clearfix">
  <li class="current surligne has_sub">
    <a class="niv1" href="http://www...">Title</a> 
    <!-- coller les balises pour eviter bug decalage IE7-->
        <ul class="sub">
           <li class="non_surligne">
           <a href="http://www..." class="niv2">Title_sub</a>
          </li>
        </ul>
     </li>
</ul>
</nav>

#menu_princ li.surligne .sub{
	display: none;
	}
@media screen and (max-width:830px) { 
/* ici les instructions pour écrans de moins de 830px de large.  */
  #deplie_menu{     
    display: block;
  }	
  nav#principal{
	display: none;
  }
}

Modifié par casp (02 Mar 2019 - 16:55)