另一个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'); 
});

我希望这个anwser可以帮助将来处理这个问题！

Answer 2

将data-role="button"添加到responsive-menu-button应该可以胜任。