javascript - 展开 div onclick 并在一段时间后自动折叠相同的 div，无法再次展开

Question

http://jsfiddle.net/tfwqD/1/

和上面的小提琴一样。我可以在单击时展开 div，setInterval 将在 3000 毫秒后折叠 div，但是尝试再次单击按钮不会重新展开 div。

这是 JS 代码（上面是完整的 JSfiddle）：

function growDiv(div) {
growDiv = document.getElementById(div);
if (growDiv.clientHeight) {
  growDiv.style.height = 0;
} else {
  var wrapper = document.querySelector('.measuringWrapper');
  growDiv.style.height = wrapper.clientHeight + "px";
}
setInterval(function(){growDiv.style.height = 0},3000);

} 

Answer 1

问题是由于growDiv函数名和变量名冲突。要么更改变量名称，要么像这样使其成为本地变量。

function growDiv(div) {
    var growDiv = document.getElementById(div);
    if (growDiv.clientHeight) {
        growDiv.style.height = 0;
    } else {
        var wrapper = document.querySelector('.measuringWrapper');
        growDiv.style.height = wrapper.clientHeight + "px";
    }
    setInterval(function () {
        growDiv.style.height = 0
    }, 3000);
    return;
}

---

更新：

http://jsfiddle.net/tfwqD/12/

var flag = false;

function growDiv(div) {
    var growDiv1 = document.getElementById(div);

    if (flag) return;
    flag = true;
    var wrapper = document.querySelector('.measuringWrapper');
    growDiv1.style.height = wrapper.clientHeight + "px";

    setTimeout(function () {
        growDiv1.style.height = '0px';
        flag = false;
    }, 3000);
    return;
}

我设置了一个标志并修改了变量名以确保它有效。

干杯！！

Answer 2

除了保留growDiv函数名和变量名之外，您已经做对了所有事情。改变任何一个任何尝试

更新了 JsFiddle http://jsfiddle.net/tfwqD/5/