Javascript （Jquery）单击div可使用css转换进行扩展

我想扩大和减少高度的标题时，我按下点击div“箭头”。我曾尝试使用Jquery添加类，但它实际上不起作用 HTML:

JQuery：

$(document).ready(function() {
   $(function() {
      $('#arrow').click(function() {
         $('header').addClass('expandheight');
}); 
}); 
});

---

我不知道我现在如何使用相同的按钮降低高度，在“expandheight”类处于活动状态时删除它，在不处于活动状态时添加它。。。我尝试了if/else，但失败了。

您有多个语法错误：

expandheight

应使用

设置样式。expandheight

使用跨浏览器动画特性

使用

toggleClass

添加/删除类

$（文档）.ready（函数（）{
$（函数（）{
$（'#箭头'）。单击（函数（）{
$（'header'）.toggleClass（'expandheight'）；
});
});
});
标题{
背景：#2282A4；
颜色：#fff；
文本对齐：居中；
宽度：100%；
高度：450px；
-webkit过渡：高度0.5s；
-moz过渡：高度0.5s；
过渡：高度0.5s；
}
.膨胀高度{
高度：850px；
}

标题

一些文本
如果要扩展和减小标题的高度，请使用toggleClass（）而不是addClass（）

此外，您的代码中还有一些错误。我创建了一个JSFIDLE来向您展示它的工作原理


（我在箭头周围加了一个边框，这样我们就可以清楚地看到示例的工作情况了）
只需使用toggle类来切换类


$（文档）.ready（函数（）{
$（函数（）{
$（'#箭头'）。单击（函数（）{
$（'header'）.toggleClass（'expandheight'）；
});
});
});
头{
背景：#2282A4；
颜色：#fff；
文本对齐：居中；
宽度：100%；
高度：450px；
过渡：高度0.5度；
}
.膨胀高度{
高度：850px；
}

标题

一些文本
将“px”添加到css类中我在这里写错了，在我的代码中指定了850px……请添加。上课前我知道，我在这里写东西的时候很匆忙。我想知道当我再次按下“箭头”时如何删除“expandheight”类…哈哈，我没有尝试使用切换，因为我不知道如何使用它。非常感谢！
header { 
  background: #2282A4;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 450px;
  transition: height 0.5 ease;
}
expandheight {
  height: 850px;
}

$(document).ready(function() {
   $(function() {
      $('#arrow').click(function() {
         $('header').addClass('expandheight');
}); 
}); 
});

jQuery(document).ready(function() {
    jQuery(function() {
        jQuery('#arrow').click(function() {
            jQuery('header').toggleClass('expandheight');
        });
    });
});