汉堡菜单点击动画问题

Question

问题是，例如，当我处于移动 window 模式时，我点击汉堡包，然后在没有关闭汉堡包的情况下，缩小到更大的分辨率，然后再次缩小到移动尺寸，然后点击汉堡上显示它已激活，但实际上并没有激活汉堡菜单向下滑动。

这里可以看到例子！ 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');
});       
}});

Answer 1

您还需要在调整大小事件处理程序中将 isclicked 设置为 false：

 /// 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');
    isclicked = false;       
 });       
}});

Fiddle

汉堡菜单点击动画问题

Hamburger menu click animation issue

javascript

jquery

html

css

css-animations