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>

Answer 2

使用类并切换它们，或者如果这不是一个选项，则根据值

切换

$('.toggle').click(function() { 
    $('.changeHight').css('height', function(_, height) {
        var h = parseInt( height.replace('px',''), 10);
        return (h === 65 ? 32 : 65) + 'px';
    });
});

FIDDLE

Answer 3

这似乎是正确的，也许有一个错字，changeHight应该是changeHeight