Question

我有以下JavaScript，可在用户点击trend_exp_bt时调整div高度。

目前可以正常工作。但是，如果用户再次单击trend_exp_bt，我想重设div高度（130px）。

请有人可以告诉我如何执行此操作，我试图查看Google上的切换功能，但这些功能似乎对我没有用。

<script>
    $('.trend_exp_bt').click(function(){
    $('.trending_contain').animate({height:'500'})
    $('.trend_exp_bt').css("line-height", "30px");
    $('.trend_exp_bt').html("&and;");

})
</script>

Answer 1

也许切换课程对您有用吗？

document.getElementById('trend_exp_bt').onclick = function() {
  document.getElementById('exp-panel').classList.toggle('expanded')
}

.panel {
  width: 250px;
  height: 130px;
  border: 1px solid blue;
  background-color: lightgrey;
  transition: all 0.3s;
}

.expanded {
  height: 300px;
}

<button id="trend_exp_bt">Expand</button>
<div id="exp-panel" class="panel">
</div>

Answer 2

如果要使用单击处理程序，则必须删除“展开”处理程序，并在展开后添加“折叠”处理程序。当用户折叠div元素时，您将不得不做相反的事情。

function expandDiv() {
    $('.trending_contain').animate({height:'500'});
    $('.trend_exp_bt').css("line-height", "30px");
    $('.trend_exp_bt').html("&and;");
    $('.trend_exp_bt').off('click').on('click', collapseDiv)
}

function collapseDiv() {
    $('.trending_contain').animate({height:'200'});
    $('.trend_exp_bt').css("line-height", "30px");
    $('.trend_exp_bt').html("&or;");
    $('.trend_exp_bt').off('click').on('click', expandDiv)
}

$('.trend_exp_bt').click(expandDiv);

Javascript：在div上单击扩展div高度，然后在第二次单击折叠div的高度？

2 个答案: