按钮更改类和开始动画

Question

我有一个步进开发，我无法将滑出部分缩回，然后第二次按下顶部的步骤按钮。

Here's a link to a pen

欢迎任何建议

var hiddenSteps = ".hiddenSteps";

$(".expandButton").click(function() {
  TweenMax.to(hiddenSteps, 0.5, {left:50, ease:Back.easeOut});
  $(this).addClass("collapseButton").removeClass("expandButton");
});
$(".collapseButton").click(function() {
  TweenMax.to(hiddenSteps, 0.5, {left:-80});
  $(this).removeClass("collapseButton").addClass("expandButton");
});

Answer 1

在动态更改元素类时，必须使用.on()方法：

var hiddenSteps = ".hiddenSteps";

$(document).on('click', '.expandButton', function() {
  TweenMax.to(hiddenSteps, 0.5, {left:50, ease:Back.easeOut});
  $(this).addClass("collapseButton").removeClass("expandButton");
});
$(document).on('click', '.collapseButton', function() {
  TweenMax.to(hiddenSteps, 0.5, {left:-80});
  $(this).removeClass("collapseButton").addClass("expandButton");
});

http://codepen.io/anon/pen/zvqNjE