javascript - jquery/js - 如何创建切换按钮来改变框的高度

Question

如何正确创建切换按钮以更改框的高度(changeHight)

$('.toggle').click(function() { 
    $('.changeHight').css('height','65px'); 
    $('.changeHight').css('height','32px');
});

Answer 1

最简单的方法是使用 .toggleClass() method 切换类.

然后让 CSS 处理其余的逻辑并添加可选的转换。

$('.toggle').click(function() { 
    $('.changeHeight').toggleClass('changed');
});

.changeHeight {
  background: #f00;
  height: 65px;
  transition: height 600ms ease-in-out;
}
.changed {
  height: 32px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">Toggle height</button>

<div class="changeHeight"><div>

---

或者，您也可以这样做:

var toggled = false;
$('.toggle').click(function() {
  $('.changeHeight').css('height', toggled ? '65px' : '32px');
  toggled = !toggled;
});

.changeHeight {
  background: #f00;
  height: 65px;
  transition: height 600ms ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle">Toggle height</button>

<div class="changeHeight"><div>