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

【问题标题】：Combining Sidr menu with animated hamburger button将 Sidr 菜单与动画汉堡按钮相结合
【发布时间】：2016-02-07 07:03:45
【问题描述】：

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

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

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

<div id="header">
    <div id="right-menu" href="#right-menu">
        <button href="#right-menu" class="c-hamburger c-hamburger--htx">
            <span>toggle menu</span>
        </button>
    </div>
</div>  

$(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'
    }); 
})();

有什么想法吗？

【问题讨论】：

标签： jquery menu icons animated sidr

【解决方案1】：

我刚刚解决了这个问题。以防以后对任何人有所帮助，我只是加倍使用以下功能：

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");
  });     
}

【讨论】：