单击时无法切换动画

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);

您需要一种方法来跟踪已选择（和动画）和未选择的内容。我选择添加一个类（已选择）并检查元素是否具有该类。如果它还没有被选中，动画到 300px 并添加类，否则动画回到 75px 并删除它。

Answer 2

试试.slideToggle

$( "#clickme" ).click(function() {
  $( "#book" ).slideToggle( "slow", function() {
    // Animation complete.
  });
});

Answer 3

jQuery 中的切换函数会切换元素的可见性，这就是它们消失的原因。

我相信您正在寻找的是.toggleClass。见http://api.jquery.com/toggleclass/。然后，您可以使用扩展的高度属性创建另一个类。哪个会在点击时打开和关闭。

向框上现有的过渡属性添加高度将处理动画。

CSS

.box {
  width:300px;
  height:75px;
  margin:0 auto;
  -webkit-transition:box-shadow 1s, height 1s;
  transition: box-shadow 1s, height 1s;
}

.expanded {
  height: 300px;
}

JS

var main = function(){
  $('.box').click(function() {
    $(this).toggleClass('expanded');
  }
)};
$(document).ready(main);