CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jordan Carter
Jordan Carter

Reputation: 1336

Click event only works second time on mobile, but fine on desktop

I've researched this and tried things like adding e.preventDefault() and return false, but no luck. The pulldown effect only happens on the second tap, although it happens on the first click for desktop.

$('.menu-item-has-children').click(function(e) {
        if ( $(this).hasClass('menu-item-slide-in') ) {
            $('.submenu-expand').removeClass('submenu-expand');
            $('> .sub-menu', this).addClass('submenu-expand');
        }
    });

It's basically just a mobile navigation menu. When you click a link with sub items, they expand out, and any other expanded menu collapses.

Here's an example of some HTML with the li that has the menu-item-slide-in class. It's taken from a WordPress nav.

<li id="menu-item-114" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-114 menu-item-slide-in" aria-haspopup="true"><span class="fa fa-chevron-down main-links-color" aria-hidden="true"></span><a href="#">Company</a>

<ul class="sub-menu">
    <li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="http://localhost/jbec/history/">History</a></li>

Upvotes: 0

Views: 1025

Answers (1)

John Smith
John Smith

Reputation: 1005

Next to listening to the click event, also listen to the touchend event. The click event might not work like you think it does on touchscreens. On iOs there's a timeout which has to occur before the click event is fired and on Android sometimes the click event is not used at all to indicate a click. Listening to the touchend event will fix your problem.

Upvotes: 1

Related Questions