汉堡菜单单击动画问题

问题是，例如，当我处于移动窗口模式时，我单击汉堡，然后在不关闭汉堡的情况下立即缩小到更大的分辨率，然后再次缩放到移动尺寸，然后单击汉堡，这表明它已被激活但实际上并不能激活向下滑动汉堡菜单的功能。

在这里您可以看到示例！http://jsfiddle.net/3n0zL27x/1/帮助将不胜感激！

  /// create a list and append to mobilemenu
var $select = $("<ul></ul>");

$("#mobileMenu").append($select);

////  Get each element in the menu li

$( "#menu li" ).each(function(){
//SELECTING ELEMENT RELATED TO THE FUNCTION
    var $anchor = $(this);
    // SELECTING THE LIST IN FUTURE THE MENU
var $li = $("<li></li>"); 
    // ADDING TEXT FROM EACH ANCHOR TO THE LIST
  $li.text($anchor.text());
    /// ADDing the list item to the unorderd list
    $select.append($li);
});


var isclicked = false;
// USER CLICKING ON THE BURGER AND ACTIVATEING THE MENU
$(".burger").click(function(event){
 event.preventDefault();
$(this).toggleClass('active');
/// IF THE BURGER MENU IS CLICKED FADE OUT THE LIST ITEMS AND SCROLL UP THE BACKGROUND
if (isclicked === true) {   
$("#menu").animate({
    height: "80px",
  }, 1500 );
    $("#mobileMenu li").fadeOut(1000);

isclicked = false;       
}
/// IF THE BURGER MENU IS NOT CLICKED SLIDE DOWN THE BACKGROUND AND FADE IN THE LIST ITEMS    
else {

$("#menu").animate({
    height: "150px",
  }, 1500 );
$("#mobileMenu li").css({
      padding: "5px 0px",
    color: "white"
    });    
$("#mobileMenu li").fadeIn(3500 );  
isclicked = true;
/// IF USER RESIZES THE PAGE REMOVE THE MENU
    $( window ).resize(function() {
    $("#mobileMenu li").css({
      display: "none",
    });

    $("#menu").css({
      height: "80px",
    });
        // SET BURGER STATE TO NOT ACTIVATED
    $(".burger").removeClass('active');
});       
}});