Javascript：在div上單擊擴展div高度，然后在第二次單擊折疊div的高度？

Question

我有以下javascript，可在用戶點擊trend_exp_bt時調整div高度。

目前運作良好。 但是，如果用戶再次單擊trend_exp_bt ，我想重設div高度（130px）。

請有人可以告訴我如何做到這一點，我試圖看一下谷歌的切換功能，但這些似乎對我沒有用。

<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("∧");
    $('.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("∨");
    $('.trend_exp_bt').off('click').on('click', expandDiv)
}

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