jQuery toggle() not working on mobile?

Hello anyone, I’m trying to make the toggle() function work on mobile version of my website but it seems just not to work. It does if I shrink my browser and click on the requested

  • but not when I tap on my smartphone.
    This is the function:
    $(".site-nav li:nth-child(2)").toggle(function(){
    $(’.sub-menu’).toggleClass(‘sub-menu-toggle’, 500)
    }, function() {
    $(’.sub-menu’).removeClass(‘sub-menu-toggle’, 500);

    Yes, I’ve used the $(document).ready(function(){, but my doubt is that toggle() might just not recognize smartphone tap instead of clicks?
    Has anyone experienced this issue as well?

  • It is my observation that mobile click events really only fire on anchor elements and buttons it does not matter if it is a toggle event, click event, etc… obviously hover events won’t work. I think this is done on purpose by the phone companies to prevent random buttons from firing when you are trying to scroll down. I would do three things:

    1. Make sure your jQuery string is correct
    2. Make sure that whatever is being clicked to target is an anchor tag, button, or input element
    3. If that doesn’t help post us a link to your site to review the whole project.

    That’s the URL: http://lamoresca.it/alpha/home.html
    I actually think the jQuery string is actually correct. I’ve also tried to modify the declaration my click event to
    .site-nav li:nth-child(2) a
    but nothing happens anyways.

    NB: I’ve had to set a :hover event to set up the height of 0 on my .sub-menu cause, whenever I tried to hover it from my desktop it would’ve triggered both the hover and the click events.
    Not sure if there is any kind of conflict between the two.