[英]dropDown function - When pressing multiple times and fast setTimeout deletes border when the height is 500px
First of all, no, I'm not going to use jQuery. 首先,不,我不会使用jQuery。
So, I have this project I'm working on, and I want to do a slide toggle element. 因此,我有一个正在处理的项目,我想做一个滑动切换元素。 Everything is nice and good until I press the button really fast.
一切都很好,直到我真正快速按下按钮。 Then the borders dissapear and the element has reached its final height(500 px in this case).
然后边界消失,元素达到其最终高度(在这种情况下为500 px)。
Perhaps my explanation wasn't that accurate, but I'll give you the code. 也许我的解释不那么准确,但是我会给你代码。
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>
I also tried using clearTimeout() but it wasn't working. 我也尝试使用clearTimeout(),但是没有用。 Yes, I set
setTimeout
as a variable, but it doesn't do anything. 是的,我将
setTimeout
设置为变量,但是它什么也没做。
Any ideas? 有任何想法吗? Cheers.
干杯。
Your current code uses combinations of inline styles and an id
selector in conjunction with the inline style being updated by JavaScript in an if/then
as well as with a setTimeout()
callback. 您当前的代码结合使用内联样式和
id
选择器,以及JavaScript在if/then
中以及通过setTimeout()
回调来更新的内联样式。 All of these instructions, coupled with the speed at which the client can repaint the UI are all contributing to the problem. 所有这些指令,再加上客户端可以重新绘制UI的速度,都是导致此问题的原因。
By cleaning up the approach to toggling the styles and how the styles are applied in the first place, there is much less potential conflict in instructions and timing. 通过清理切换样式的方法以及首先应用样式的方式,可以减少指令和时序方面的潜在冲突。
Remove all the static styles from the HTML and set up CSS classes for the normal and expanded states of the element. 从HTML中删除所有静态样式,并为元素的正常和扩展状态设置CSS类。 Then just use the
element.classList.toggle()
method to seamlessly toggle the use of the expanded class. 然后,只需使用
element.classList.toggle()
方法无缝切换扩展类的使用即可。 No timers needed. 无需计时器。
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>
NOTE: 注意:
Be careful when setting up CSS selectors that are id
based because they become very difficult to override later. 设置基于
id
的CSS选择器时要小心,因为以后很难覆盖它们。 I'm not saying never use them, but more often than not, CSS classes provided the most flexible solutions and help to avoid gobs and gobs of inline styles. 我并不是说从不使用它们,而是CSS类经常提供最灵活的解决方案,并有助于避免使用内嵌样式的gob和gob。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.