点击事件仅在移动设备上第二次有效,但在桌面

时间:2017-01-31 14:56:10

标签: javascript jquery html css

我已经对此进行了研究并尝试了添加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>

1 个答案:

答案 0 :(得分:1)

在听取click事件之后,还要收听touchend事件。点击事件可能不像您认为的那样在触摸屏上工作。在iO上,在点击事件被触发之前必须发生超时,而在Android上,有时候根本不会使用点击事件来表示点击。听取touchend事件将解决您的问题。