将Sidr菜单与动画汉堡包按钮相结合

我的测试页面 https://osticketawesome.com/support/awesome/inc/test.html

我正在尝试将汉堡包菜单与Sidr jQuery插件相结合，以创建侧面菜单。

它在Chrome，FF，IE和Edge中完美运行，但在我测试过的移动浏览器 （Android / Chrome和iPhone / Safari）中，菜单切换但按钮仅在按下按钮的外边缘时才会动画。

 
  toggle menu  
 
 $(document).ready(function() { var toggles = document.querySelectorAll(".c-hamburger"); for (var i = toggles.length - 1; i >= 0; i--) { var toggle = toggles[i]; toggleHandler(toggle); }; function toggleHandler(toggle) { toggle.addEventListener( "click", function(e) { e.preventDefault(); (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active"); }); } $('.c-hamburger').sidr({ name: 'right_menu', side: 'right', body: 'container' }); })(); 

有任何想法吗？

Answer 1

我刚解决了这个问题。 如果以后它可以帮助任何人，我只需要对以下function加倍：

 function toggleHandler(toggle) { toggle.addEventListener( "click", function(e) { e.preventDefault(); (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active"); }); toggle.addEventListener( "touchstart", function(e) { e.preventDefault(); (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active"); }); }