jquery動畫菜單打開但不會關閉

Question

我有一個移動菜單，當點擊漢堡包時，當前動畫從視口的右邊緣打開。但隨後的漢堡點擊什麼都不做。它應該動畫菜單到關閉的位置。我已經嘗試了以下許多變體，但沒有成功。

$('#menu-wrap').prepend('<div id="menu-trigger"><i class="fa fa-bars fa-2x"></i></div>'); 
$("#menu-trigger").on("click", function(){ 
    $('this').addClass('opened'); 
    $('#menu').animate({ width:'220' }, 500).css('padding', '40px');   
}); 
$("#menu-trigger.opened").on("click", function(){ 
    $('this').removeClass('opened'); 
    $('#menu').animate({ width:'0' }, 500).css('padding', '0px'); 
}); 

我已驗證＃menu-trigger確實收到'opened'類，但它在第一次單擊後沒有響應。

Answer 1

這兩個點擊事件仍然會觸發，因爲您不告訴第一個不以任何方式觸發。這可能會導致真正發生的問題。

考慮重寫代碼的東西更清楚，這樣的：

$("#menu-trigger").on("click", function(){ 
    if($(this).hasClass('opened'){ 
    $(this).removeClass('opened'); 
    $('#menu').animate({ width:'0' }, 500).css('padding', '0px'); 
    } else { 
    $(this).addClass('opened'); 
    $('#menu').animate({ width:'220' }, 500).css('padding', '40px');   
    } 
}); 

此外，$('this')和$(this)是不一樣的 - 前者將尋找在DOM與標籤名稱this元素（如<this></this>）這不是你想要的。

---

$("#menu-trigger").on("click", function() { 
 
    if ($(this).hasClass('opened')) { 
 
    $(this).removeClass('opened'); 
 
    $('#menu').animate({ 
 
     width: '0' 
 
    }, 500).css('padding', '0px'); 
 
    } else { 
 
    $(this).addClass('opened'); 
 
    $('#menu').animate({ 
 
     width: '220' 
 
    }, 500).css('padding', '40px'); 
 
    } 
 
});

#menu-trigger {color: red} 
 
#menu-trigger.opened {color: green} 
 
#menu {border: 1px solid black; display: inline-block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="menu-trigger">Menu trigger</button><br> 
 
<div id="menu">Menu</div>