与动画汉堡包按钮

Question

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

我想要一个汉堡包菜单与锡德jQuery插件，用于创建侧面菜单结合结合锡德菜单。

它完全在Chrome中，FF，IE和边缘，但在移动浏览器我测试过（的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' 
    }); 
})(); 

任何想法？

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