滑动元件不会滑落

Question

我正在制作一个带有复选框的表单，如果选中该复选框，则会向下滑动更多选项，如果未选中，则会向上滑动。

对函数的调用有效一轮 IE 在选中时向下滑动，在取消选中时向上滑动，但不会向上滑动。

请帮我弄清楚如何进行这项工作。

**注意：我不了解 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_booking this 内部将是刚刚单击的复选框。现在您可以更简单地编写该函数，例如：

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