Javascript 单击时切换动画时遇到问题

我试图使一个div在单击时高度扩展，然后在再次单击时返回其原始大小。我曾尝试使用.toggle，但每当我使用它时，每个div（与相关类）都会完全消失。我在下面贴了一支代码笔，这样你就可以很容易地查看代码效果。

---

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

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

---

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

将脚本文件替换为以下内容：

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

---

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

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

我相信你要找的是

.toggleClass

。看见然后可以创建另一个具有扩展高度属性的类。在单击时将打开和关闭

向长方体上的现有过渡属性添加高度将处理动画

CSS

JS

---

现在，当我第二次单击它时，它会像预期的那样向上滑动，但它会使div完全消失，因此无法再次单击它。这看起来确实应该工作，但当我单击它时，div不会扩展。我不需要特别的图书馆，对吗？我已经添加了JQuery和JQuery UI库。Woops，请确保在

.box

之后定义了

.expanded

。

.box

上的height属性自上次声明以来一直处于优先地位。对于简单的切换动画来说似乎有点复杂，但如果我无法让jamtjg的建议发挥作用，我肯定会尝试。我可能应该澄清我是这篇文章的所有者，但我切换了帐户，当我在我的工作电脑与正确的帐户，我会确认这是解决办法。非常感谢！

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

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

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

.expanded {
  height: 300px;
}

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