jQuery的 toggle() 方法來切換元素的顯示和隱藏：顯示被隱藏的元素，并隱藏已顯示的元素，從而實現上述功能。

$(selector).toggle();??//?切換目標元素的顯示和隱藏狀態

實例演示：點擊按鈕出現輸入框，同時改變按鈕的說明文字，再次點擊按鈕則隱藏輸入框，按鈕回到原始狀態。如此循環。

創建Html元素

<div?class="box">
<span>點擊按鈕實現展開和收起輸入框的切換：</span><br>
<div?class="content">
<span>請發表你的看法</span><input?type="button"?value="好的"><br>
<div?class="test"><textarea></textarea></div>
</div>
</div>

設置css樣式

div.box{width:300px;padding:20px;margin:20px;border:4px?dashed?#ccc;}
div.box?span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px?0;padding:20px;border:2px?solid?#ff6666;}
textarea{width:250px;height:100px;margin:10px?0;border:1px?solid?#6699cc;}

編寫jquery代碼

$(function(){
$(".test").hide();??//?默認隱藏狀態
$(":button").click(function()?{
$(".test").toggle('slow');??//?改變顯隱狀態
$(this).val($(this).val()=="好的"?"我不想說了":"好的");?//?改變按鈕的文字說明
})
})

觀察效果

初始狀態

點擊“好的”后的效果

再次點擊按鈕“我不想說了”