點擊一組縮圖，大圖顯示並切換到對應的圖，再點擊該縮圖大圖隱藏。當大圖顯示時，點擊其它小圖，大圖切換但不隱藏。我的問題是：當大圖顯示時，點擊其它小圖，大圖切換但不隱藏，但二次點擊該縮圖大圖隱藏，這種效果怎麼實現？
<ul class="tm-m-photos-thumb">
<li src="img/images/production-introdution-review-bgpic1.jpg">
<img src="img/images/production-introdution-review-smpic1.jpg">
</li>
<li src="img/images/production-introdution-review-bgpic2.jpg" >
<img src="img/images/production-introdution-review-smpic1.jpg">
</li>
<li src="img/images/production- introdution-review-bgpic3.jpg">
<img src="img/images/production-introdution-review-smpic1.jpg">
</li>
<p class ="tm-m-photo-viewer" style="width: 402px; height: 302px; display: none;">
<img src="img/images/production-introdution-review-bgpic1.jpg " style="width: 402px; height: 302px;">
</p>