jQuery点击事件未在移动设备上点按

Question

我有一个伪按钮，用于打开/关闭移动菜单：

<div id="top-nav-mobile-toggle">
<i class="fa fa-bars"></i>
</div>

要打开和关闭菜单，我有：

$('#top-nav-mobile-toggle').click(function() {
  $('.top-nav-menu').slideToggle();
});

它在桌面上工作正常（使用鼠标），但是当我点击触摸屏设备时，它无法正常工作。

有没有办法让它在不使用大型jQuery插件的情况下可靠地在触摸屏设备上工作？

Answer 1

您应该使用.on("click touchstart")代替.click。这对我有用。

$('#top-nav-mobile-toggle').on("click touchstart", function() {
  $('.top-nav-menu').slideToggle();
});

Answer 2

你可以尝试：

更改您的html代码以包含标记：

<div>
    <i class="fa fa-bars">
        <a href="#" id="top-nav-mobile-toggle"></a>
    </i>
</div>

在javascript / jQuery代码中使用return false来停止冒泡：

$(document).ready(function(){
    $('#top-nav-mobile-toggle').click(function() {
        $('.top-nav-menu').slideToggle();
        return false;
    });
});