How to active a sub menu on single click only

Question

I wanna do the following for the menu in mobile devices: On a single click, the children items should drop down. But on double clicks,it should take me directly to its page. Eg. About item has children and I also a link that takes me to the about page. If I click on it, the sub-item should show up as a block levels elements. But if I double click, it should take me directly to its link ( in this case, to the About page).

I tried this:

$(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"));       
     }                
   });   
});

Apparently, the else statement is being executed. But when I click for the first time, the sub-menu does not show.

I also tried using slideToggle() instead of the css property but it does not work. Unfortunately the site is still on a test domain and password protected so I can not paste the link here. Hope you can help.

jQuery has a double click function that might help. https://api.jquery.com/dblclick/ — Billy Moat, Oct 06 '16 at 08:47
Is there only one `list-item`? If not, trying to expand a second list would result in exectuing the `else` statement. — Kilian Stinson, Oct 06 '16 at 08:49
Rather check if the current clicked list is already expanded, then follow the href is it is. — Kilian Stinson, Oct 06 '16 at 08:51
There are 5 menu items. Two of them ( About and Projects ) have sub-items. So I would like to display those sub-items — Nadj, Oct 06 '16 at 08:56

score 1 · Answer 1 · edited May 23 '17 at 10:27

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>

You need click and dblclick event like as below to get your job done.
Inside the click event you can set timer to enhance it more, please refer already answered question @ Jquery bind double click and single click separately

 $(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
        }
});

Panwar. The result is the same. The double click works, but the single click doesn't. I used the css(display:block) and slideToggle but none of them work. Please check this fiddle: https://jsfiddle.net/mvn7ayun/22/ — Nadj, Oct 06 '16 at 09:15
Panwar. I have tried that snippet yesterday and just tried again. When I use the single click,the alert function works.But still it does not prevent the About link from getting active. — Nadj, Oct 06 '16 at 09:35
try using $(this).removeClass("active") where $(this) is the clicked section. — Anil Panwar, Oct 06 '16 at 09:42

How to active a sub menu on single click only

1 Answers1