[英]Combining Sidr menu with animated hamburger button
我的測試頁 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'
});
})();
有任何想法嗎?
我剛剛解決了這個問題。 萬一以后對任何人有幫助,我將以下功能加倍:
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");
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.