另一个 click() 事件中的 jQuery click() 事件在移动设备上不起作用

Question

我希望制作一个从页面右侧滑出的移动菜单，在显示后显示相应的导航。我使用 sidr.js 插件来创建滑动过渡，并且所有导航都显示正常。我在计算机上拥有完整的移动菜单功能，而且它看起来很棒，并且可以按照我想要的方式运行。

但是，当我切换到手机并访问网站时，导航有一个重大缺陷。我在导航区域的顶部放置了一个按钮，单击该按钮会关闭侧边导航。以下是执行此任务的功能，在计算机上没问题。问题是它不能在手机上运行！！请帮忙，我很困惑为什么这不起作用。

$(document).on('click', 'a.btn.btn-default.mobile-btn', function(event) {
  event.preventDefault();
  $("#responsive-menu-button").click();
});

您也可以在http://mgm702.github.io 上实时查看问题，但您必须在移动设备上才能注意到问题。另外，我已经尝试了cursor: pointer; 选项等，但没有成功。

Answer 1

我找到了适合我特定情况的解决方案。我使用的是Sidr.js Plugin，其中一个功能是关闭菜单滑块的内置功能。我将此附加到我当前使用的功能上，这解决了问题。然后菜单与移动设备触摸界面一起工作。我的最终功能是这样的

$(document).on('click touchstart', 'a.btn.btn-default.mobile-btn', function(event) {
  event.preventDefault();
  $.sidr('close','sidr-main'); 
});

我希望这个答案可以帮助将来处理这个问题的人！

Answer 2

将data-role="button" 添加到您的responsive-menu-button 应该可以完成这项工作。