Click事件仅在移动设备上第二次有效，但在台式机上很好

Question

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>

Answer 1

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.