滑動元素不會滑回

Question

嗨我正在製作一個複選框，如果選中將滑落一些更多的選項。並取消選中它將滑動

該函數的調用工作一輪I.E.在檢查時滑下並取消選中，但不會滑回

請幫我弄清楚如何使這項工作。

**注意：我不知道jQuery，並且不想花時間在此刻學習它。

<form> 
<table> 
rows and cells here 
THIS IS THE CHECKBOX TO SHOW HIDDEN TABLE --> <input type="checkbox" name="booking" class="field" value="booking" onclick="show_booking('booking',200,5)"/> Check here for booking 
</table> 
<table id="booking"> 
HIDDEN rows and cells here 
</table> 
</form> 

******************JAVASCRIPT********************* 

function show_booking(obj, heightOpen, heightClose){ 
    if(document.getElementById(obj).style.height <= 6){ 
     animateDown(document.getElementById(obj),heightOpen); 
    } 
    else { 
     animateUp(document.getElementById(obj), heightClose); 

    } 
} 

function animateDown(obj, height){ 

     var obj_height = obj.clientHeight; 

     if(obj_height >= height){ return;}    
     else { 
      obj.style.height = (obj_height + 5) + "px"; 
      setTimeout(function(){ 
       animateDown(obj, height); 
      }, 25) 
     } 
} 


function animateUp (obj, height){ 

     var obj_height = obj.style.height.substring(0,2); 
     if(obj_height >= height){ obj.style.height = (obj_height - 5) + "px"; 
      setTimeout(function(){ 
       animateUp(obj, height); 
      }, 200)} 
     else { return; }   
     }  

Answer 1

你真的想基於該複選框是否被選中行事，那麼爲什麼不使用複選框的選中屬性：

<input onclick="show_booking.apply(this, ['booking', 200, 5])" type="checkbox" name="booking" class="field" value="booking" 

apply設置功能的內部this價值第一論據。因此，在show_bookingthis內部將是剛被點擊的複選框。現在，您可以更簡單的寫的功能等：

function show_booking(obj, heightOpen, heightClose){ 
    if(this.checked) { 
     animateDown(document.getElementById(obj),heightOpen); 
    } 
    else { 
     animateUp(document.getElementById(obj), heightClose); 
    } 
}