So aktivieren Sie ein Untermenü nur mit einem einzigen Klick

Question

Ich möchte Folgendes für das Menü in mobilen Geräten tun: Mit einem einzigen Mausklick sollten die untergeordneten Elemente ablegen. Aber bei Doppelklick sollte es mich direkt auf seine Seite bringen. Eg. Über Artikel haben Kinder und ich auch einen Link, der mich auf die About-Seite bringt. Wenn ich darauf klicke, sollte der Unterpunkt als Blockstufenelemente erscheinen. Aber wenn ich doppelt klicke, sollte es mich direkt zu seinem Link führen (in diesem Fall zur Info-Seite).

Ich versuchte dies:

$(document).ready(function(){    
    var clicks = 0; 
    $("ul#primary > li.menu-item-has-children").click(function(e) { 
    clicks++; 
    if(clicks === 1) 
    { 
     e.preventDeafult(); 
     $("ul#primary > li.menu-item-has-children ul.sub-menu").css("display","block"); 
    } 
    else if(clicks > 1) { 
     window.location($(this).attr("href"));  
    }     
    }); 
}); 

Offenbar wird die else-Anweisung ausgeführt wird. Aber wenn ich zum ersten Mal klicke, wird das Untermenü nicht angezeigt.

Ich habe auch versucht mit slideToggle() anstelle der CSS-Eigenschaft, aber es funktioniert nicht. Leider befindet sich die Seite immer noch auf einer Test-Domain und ist passwortgeschützt, daher kann ich den Link hier nicht einfügen. Hoffe, du kannst helfen.

Answer 1

var DELAY = 700, clicks = 0, timer = null; 
 
    $("p").dblclick(function(e){ 
 
     e.preventDefault(); //cancel system double-click event 
 
    }).click("click",function(){ 
 
    
 
clicks++; //count clicks 
 

 
     if(clicks === 1) { 
 

 
      timer = setTimeout(function(e) { 
 

 
       alert("Single Click"); //perform single-click action  
 
       clicks = 0;    //after action performed, reset counter 
 

 
      }, DELAY); 
 

 
     } else { 
 

 
      clearTimeout(timer); //prevent single-click action 
 
      alert("Double Click"); //perform double-click action 
 
      clicks = 0;    //after action performed, reset counter 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Double-click or click.</p>

Sie benötigen klicken und dblclick Ereignis wie unten als Ihre Arbeit zu erledigen.
Im Inneren des Click-Ereignis Sie Timer kann es zu verbessern, @Jquery bind double click and single click separately verweisen bereits beantworteten Frage bitte

$(document).ready(function(){    

      $("ElementToBEClicked").click(function(e) { 
       //Expand here your menu   

      }).dblclick(function(e){ 
       //Redirect to URL on double click 
      }); 
     }); 

Update:

<p>Double-click or click.</p> 


var DELAY = 700, clicks = 0, timer = null; 
    $("p").dblclick(function(e){ 
     e.preventDefault(); //cancel system double-click event 
    }).click("click",function(e){ 

clicks++; //count clicks 

     if(clicks === 1) { 

      timer = setTimeout(function(e) { 

       alert("Single Click"); //perform single-click action  
       clicks = 0;    //after action performed, reset counter 

      }, DELAY); 

     } else { 

      clearTimeout(timer); //prevent single-click action 
      alert("Double Click"); //perform double-click action 
      clicks = 0;    //after action performed, reset counter 
     } 
});