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

如何创建切换按钮以更改框的高度的正确方法（changeHight）

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

最佳答案

最简单的方法是使用.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>

关于javascript - jquery/js-如何创建切换按钮以更改框的高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28786593/