Javascript 使用setTimeout和addEventListener调用具有相同元素的函数

我有一个

div

，可以展开和缩回以显示/隐藏内容。我正在使用

按钮
s和
addEventListner
来显示/隐藏
div
。我有一个以上的
div
我想显示/隐藏和一组以上的显示/隐藏
按钮。因此，我尝试重用显示/隐藏内容的相同两个函数，但使用不同的事件处理程序

我遇到的问题是将相关的
div id
传递给函数，以便函数知道每个函数调用要显示/隐藏哪个
div
元素。
功能
在第一次交互时识别
div id
，但是当通过
setTimeout
调用时，
div id
不再被识别。我尝试将用于
divid
的变量添加到
setTimeout
中，但没有任何乐趣

我知道我可以使用内联javascript来实现这一点，但我试图避免这种情况

我在这里尝试使用外部javascript如何解决这个问题

HTML:

expandretract
…此处有一些内容

我也很喜欢
…此处有更多内容


Javascript:

function divExp(elem) {
    var element = document.getElementById(elem);
    var h = element.offsetHeight;
    var scrollHeight = element.scrollHeight;
    var divTimer = setTimeout(divExp, 20);
    if(h < scrollHeight) {
        h += 5;
    } else {
        clearTimeout(divTimer);
    }
    element.style.height = h+'px' ;
}

function divRetract(elem2) {
    var element = document.getElementById(elem2);
    var h = element.offsetHeight;
    var retTimer = setTimeout(divRetract, 20);
    if(h > 0) {
        h -= 5;
    } else {
        clearTimeout(retTimer);
    }
    element.style.height = h+'px' ;
}

document.getElementById('expand').addEventListener('click', function(){   divExp('latinText'); }, false);
document.getElementById('retract').addEventListener('click',function (){   divRetract('latinText') }, false);
document.getElementById('expandToo').addEventListener('click', function(){ divExp('latinText2'); }, false);
document.getElementById('retractToo').addEventListener('click',function(){     divRetract('latinText2'); }, false);

函数divExp（elem）{
var元素=document.getElementById（elem）；
var h=元素。偏离视线；
var scrollHeight=element.scrollHeight；
var divTimer=setTimeout（divExp，20）；
如果（h<滚动高度）{
h+=5；
}否则{
clearTimeout（divTimer）；
}
element.style.height=h+'px'；
}
功能分区收回（elem2）{
var元素=document.getElementById（elem2）；
var h=元素。偏离视线；
var retTimer=设置超时（divRetract，20）；
如果（h>0）{
h-=5；
}否则{
clearTimeout（retTimer）；
}
element.style.height=h+'px'；
}
document.getElementById（'expand'）.addEventListener（'click'，function（）{divExp（'latinText'）；}，false）；
document.getElementById（'retract'）.addEventListener（'click'，函数（）{divRetract（'latinText'）}，false）；
document.getElementById（'expandToo'）.addEventListener（'click'，function（）{divExp（'latinText2'）；}，false）；
document.getElementById（'RetractTo'）.addEventListener（'click'，function（）{divRetract（'latinText2'）；}，false）；
我不确定是否完全理解了问题所在，但听起来您需要将参数传递给要使用
setTimeout
调用的函数

var retTimer = setTimeout(function() {
  divRetract(elem2)
}, 20);

你应该写

var divTimer = setTimeout(function(){divExp(elem)}, 20);

而不是

var divTimer = setTimeout(divExp, 20);

然后将相同的元素传递给一个函数，该函数由timeout调用。否则，调用不带参数的divExp（）函数
表示歉意，因为它不够清晰。我对这个问题进行了编辑，以使它更清楚。
var divTimer = setTimeout(divExp, 20);