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

Question

我想制作一个从页面右侧滑出的移动菜单，一旦显示就会显示相应的导航。我正在使用 sidr.js 插件来创建滑动过渡，并且所有导航都显示正常。我的移动菜单在电脑上功能齐全，看起来很棒，功能也符合我的要求。

然而，当我切换到手机 phone 并访问网站时，导航有一个重大缺陷。我在导航区域的顶部放置了一个按钮，单击它会关闭侧边导航。下面是执行此任务的函数，在计算机上它很好。问题是它不会在移动设备上工作！请帮忙，我很困惑为什么这不起作用。

$(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

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

Answer 2

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

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

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

jQuery click() event inside another click() event won't work on mobile