单击时jquery动画不会返回

Question

我在这个 jquery 动画中遇到了问题。

为了简单起见，展开的 div 不会在再次点击时返回。

这是一个 jsfiddle 链接: http://jsfiddle.net/vtaqm3cb/

这是我在 jquery 中使用的代码示例

$(document).ready(function(){

  $("#div_menu_icon").click(function(){
    var new_size = "250"; //this is the width of the menu when expanded
    var menu_icon_width = "55px";
    var div_menu_open = $("#div_menu").width() >= new_size ? menu_icon_width : new_size ;


    $('#div_menu').animate({ width: div_menu_open, }, {duration:200,queue: false });
    $('#div_menu_icon').animate({ width: div_menu_open }, {duration:200,queue: false });
  });

});

请帮我解决这个问题，谢谢

编辑:尝试用 jsfiddle 中的这个替换 div_menu 的 CSS，它有效。但是我的设计需要边框，那么有没有办法解决它？

#div_menu{

background-color:#34495e;
width:100%;
height: calc( 100% - 50px);
}

Answer 1

$(document).ready(function(){
  var expanded = false;    
  var new_size = "250";
  var menu_icon_width = "55";

  $("#div_menu_icon").click(function(){          
      var newWidth = expanded ? menu_icon_width : new_size;          
      $('#div_menu').animate({ width: newWidth }, {duration:200 });
      $('#div_menu_icon').animate({ width: newWidth }, {duration:200 });          
      expanded = !expanded;
  });      
});

我不知道为什么你的不工作，我会继续调查它，否则它会困扰我。但是，至少就目前而言，我简化了您的逻辑并按照我的建议将变量带到了事件处理程序之外。