javascript - 单击时无法切换动画

Question

我正在尝试制作一个 div，单击时其高度会扩展，然后再次单击时又恢复到其原始大小。我尝试使用 .toggle 但每当我执行每个 div (具有相关类)时都会完全消失。下面我贴了代码笔，方便大家查看代码效果。 http://codepen.io/JoshuaHurlburt/pen/JKqAPr

<div>
  <div class='box' id='emailVer'>
    <h2 id='payText'>PAYMENT</h2>
  </div>

  <div class='box' id='accCust'>
    <h2 id='acText'>ACCOUNT CUSTOMIZATION</h2>
  </div>

    <div class='box' id='pay'>
    <h2 id='evText'>EMAIL VERIFICATION</h2>

  </div>
</div>

JS:

var main = function(){
  $('.box').click(function() {
    $(this).animate({
      height: "300px"
    },200 );
  }
)}
$(document).ready(main);

我决定省略 CSS，但如果有人认为它对解决方案很重要，我会对其进行编辑

Answer 1

可能有比这更好的解决方案，但这里有一个 -

用这个替换你的脚本文件

var main = function(){
  $('.box').click(function() {
    var el = $(this); 
    if (!el.hasClass('selected')) {
      el.animate({
      "height": "300px"
    }, 200)
      el.addClass("selected");
    } else {
      el.animate({
      "height": "75px"
    }, 200);
      el.removeClass("selected");
    }
  }
)}
$(document).ready(main);

您需要一种方法来跟踪已选择的内容(和动画)和尚未选择的内容。我选择添加一个类(选定)并检查该元素是否具有该类。如果尚未选择，则将动画设置为 300 像素并添加类，否则将动画设置回 75 像素并将其删除。