javascript - (Jquery) 单击 div 使用 css 转换扩展

Question

我想在单击 div“箭头”时扩展和减小标题的高度。我试过用 Jquery 添加类，但它并没有真正起作用 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”类处于事件状态时删除它，在它不活动时添加它...我试过 if/else，我失败了。

Answer 1

你有多个语法错误:

1. expandheight 的样式应使用 .expandheight
2. 使用跨浏览器动画属性
3. 使用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>