Htykuut

I am using the following JQuery in a project of mine to make top level menu links click once to open a submenu then, click the same top level link again to go to its URL. The code works fine in mobile and tablet, but now it as affected the desktop menu hover on top level links. I would like to have this code only work for mobile and tablet devices under 768px. Any help is appreciated. Thanks.

$(document).ready(function () {

$(‘#nav li').children('ul').hide();

$(‘#navl li a').click(function (event) { 

    var ts=$(this);

 var len=$(ts).parent('li').has('ul').length;

   if(len>0)

   {

       if($(ts).hasClass('clicked'))

       {



       }

       else

       {

           $(ts).parent('li').find('ul').first().slideDown();

           $(ts).addClass('clicked');

           return false;

       }

   }

})

});

I think you could use jQuery to check the resolution of the webpage when displayed:

$(window).resize(function () {

    if ($(window).width() < 768) {

        //Do something or in this case, put the code that needs to run under this situation

    }

});

This will check the resolution of the webpage/browser everytime it changes.

Also I noticed that in your code, you have this: $(‘#nav li'). and If my sight is good, there's only one ', you would have to change it like this: $('#nav li'). And in the line below that, you have the same thing.

Hope it helps you or guides you to another solution!