javascript - (jQuery)单击时div随CSS过渡扩展

我想在点击div“ arrow”时扩大和降低标题的高度。我试图用Jquery addClass，但实际上并没有用
HTML：

<header>
    <p>The title..</p>
    <h1>Some text</h1>
      <div class="arrow" id="arrow">
        <img src="img/arrow.svg" />
      </div>
</header>

的CSS

header {
  background: #2282A4;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 450px;
  transition: height 0.5 ease;
}
expandheight {
  height: 850px;
}

jQuery的：

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

我不知道现在该如何使用相同的按钮减小高度，以在活动状态下删除“ expandheight”类，并在非活动状态下将其添加...我尝试过，否则，我失败了。

最佳答案

您有多个语法错误：


expandheight应该使用.expandheight设置样式
使用跨浏览器动画属性
使用toggleClass添加/删除类

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

header {
  background: #2282A4;
  color: #fff;
  text-align: center;
  width: 100%;
  height: 450px;
  -webkit-transition:height 0.5s ease;
  -moz-transition:height 0.5s ease;
  transition:height 0.5s ease;
}

.expandheight {
  height: 850px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<header>
  <p>The title..</p>
  <h1>Some text</h1>
  <div class="arrow" id="arrow">
     <img src="img/arrow.svg" />
  </div>
</header>