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

你真的试图根据复选框是否被选中来行动，所以为什么不使用复选框的checked属性：

<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);
    }
}

滑动元件不会向下滑动

1 个答案: