dropDown功能-多次按下并快速setTimeout会在高度为500px时删除边框

Question

首先，不，我不会使用jQuery。

因此，我有一个正在处理的项目，我想做一个滑动切换元素。 一切都很好，直到我真正快速按下按钮。 然后边界消失，元素达到其最终高度（在这种情况下为500 px）。

也许我的解释不那么准确，但是我会给你代码。

 var div = document.getElementById('div'); var btn = document.getElementById('button'); function clickFunction(){ if(div.style.height === "0px") { div.style.height = "500px"; div.style.borderStyle = "solid"; } else { div.style.height = "0px"; setTimeout(function(){div.style.borderStyle = "none";}, 500); } } btn.onclick = clickFunction; 

 div#div { transition: 500ms ease; width: 100px; height: 200px; margin-top: 20px; } .container { width: 120px; background-color: red; padding: 8px; } 

 <button id="button"> Press me </button> <div class="container"> <div id="div" style="border-style: none; border-width: 2px; height: 0px;"></div> </div> 

我也尝试使用clearTimeout（），但是没有用。 是的，我将setTimeout设置为变量，但是它什么也没做。

有任何想法吗？ 干杯。

Answer 1

您当前的代码结合使用内联样式和id选择器，以及JavaScript在if/then中以及通过setTimeout()回调来更新的内联样式。 所有这些指令，再加上客户端可以重新绘制UI的速度，都是导致此问题的原因。

通过清理切换样式的方法以及首先应用样式的方式，可以减少指令和时序方面的潜在冲突。

从HTML中删除所有静态样式，并为元素的正常和扩展状态设置CSS类。 然后，只需使用element.classList.toggle()方法无缝切换扩展类的使用即可。 无需计时器。

 var div = document.getElementById('div'); var btn = document.getElementById('button'); btn.addEventListener("click", function(){ div.classList.toggle("expanded"); }); 

 .container { width: 120px; background-color: red; padding: 8px; } .normal { transition: 500ms ease; width: 100px; margin-top: 20px; border:0px solid black; height: 0px; } .expanded { height: 200px; border:2px solid black; } 

 <button id="button">Press me</button> <div class="container"> <div id="div" class="normal"></div> </div> 

注意：

设置基于id的CSS选择器时要小心，因为以后很难覆盖它们。 我并不是说从不使用它们，而是CSS类经常提供最灵活的解决方案，并有助于避免使用内嵌样式的gob和gob。