Объединение меню Сидра с анимированной кнопкой гамбургера

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