javascript - 点击事件仅在移动设备上第二次有效，但在桌面上正常

Question

我已经对此进行了研究并尝试了诸如添加 e.preventDefault() 和 return false 之类的操作，但没有成功。下拉效果只发生在第二次点击时，尽管它发生在桌面的第一次点击上。

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

它基本上只是一个移动导航菜单。当您单击带有子项的链接时，它们会展开，而任何其他展开的菜单都会折叠。

这是一些带有 li 的 HTML 示例，其中包含 menu-item-slide-in 类。它取自 WordPress 导航。

<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

在监听 click 事件之后，还要监听 touchend 事件。单击事件可能不像您认为的那样在触摸屏上起作用。在 iOs 上，在点击事件被触发之前必须发生超时，而在 Android 上，有时根本不使用点击事件来指示点击。收听 touchend 事件将解决您的问题。