javascript - Javascript:在div上单击展开div高度，然后在第二次单击折叠div高度？

当用户单击trend_exp_bt时，我使用以下javascript调整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>

最佳答案

如果要使用单击处理程序，则在展开后必须删除“展开”处理程序并添加“折叠”处理程序。用户折叠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);

关于javascript - Javascript:在div上单击展开div高度，然后在第二次单击折叠div高度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55270927/